Questions on Kendo UI for jQuery Forum

6 answers

616 views

The standard fontFamily toolbar menu lists the following fonts: "Arial", "Courier New", "Georgia", "Times New Roman", "Trebuchet MS", "Verdana"

I'd like to add additional ones to the list but haven't been able to figure out how. There appears to be support for customizing the list by setting a fontFamilies property somewhere, but I haven't been able to figure out where to do this or how to get a reference to the drop down list.

Thanks

Spreadsheet

answered on 07 Apr 2021

14 answers

491 views

MVC Treeview with checkboxes on Custom Edit Popup from Grid

I have Index.shtml with Grid control:

@(Html.Kendo()

.Grid<EditingWithServerValidation.Models.Product>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.Id);

columns.Bound(p => p.Name);

columns.Command(command => command.Edit()).Width(100);

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Details"))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(false)

.ServerOperation(false)

.Model(model => model.Id(p => p.Id))

.Read("_Read", "Home")

.Update("_Update", "Home")

)

Controller have _Read method

public ActionResult _Read([DataSourceRequest] DataSourceRequest request)

{

List<Product> MyProduct = GetProductsList();

return Json(MyProduct.ToDataSourceResult(request));

}

public ActionResult Index([DataSourceRequest] DataSourceRequest request)

{

ViewBag.AreaOfLaw = GetAreaLaw();

return View();

}

private List<Product> GetProductsList()

{

List<Product> MyProd = new List<Product>();

for (int i = 1; i < 10; i++)

{

Product p = new Product();

p.Id = i;

p.Name = "Product #" + i.ToString();

MyProd.Add(p);

}

return MyProd;

}

private List<TreeViewItemModel> GetAreaLaw()

{

List<TreeViewItemModel> TVList = new List<TreeViewItemModel>();

TreeViewItemModel AL = new TreeViewItemModel();

AL.Id = "1";

AL.Text = "ROOT-1";

AL.HasChildren = true;

AL.Expanded = true;

TreeViewItemModel SubAL = new TreeViewItemModel();

SubAL.Id = "3";

SubAL.Text = "Sub-1-1";

AL.Items.Add(SubAL);

TVList.Add(AL);

AL = new TreeViewItemModel();

AL.Id = "2";

AL.Text = "ROOT-2";

AL.HasChildren = true;

AL.Expanded = true;

SubAL = new TreeViewItemModel();

SubAL.Id = "4";

SubAL.Text = "Sub-2-1";

AL.Items.Add(SubAL);

SubAL = new TreeViewItemModel();

SubAL.Id = "5";

SubAL.Text = "Sub-2-2";

AL.Items.Add(SubAL);

TVList.Add(AL);

return TVList;

}

And Model describe Product:

public class Product

{

public int Id { get; set; }

[Required]

public string Name { get; set; }

}

Details.shtml Custom PopUP template as simple as possible (I remove from this template all other markup except treeview )

<div id="tv" style="overflow:scroll; height:200px;">

@(Html.Kendo().TreeView()

.Name("treeview")

.Checkboxes(true)

.BindTo((IEnumerable<TreeViewItemModel>)ViewBag.AreaOfLaw)

)

</div>

When I run it - I got the grid , Edit click Open Popup with Treeview , but Checkboxes behavior is weird - click on any one checkbox Select All or Clead All checkboxes on the screen

When I move Treeview from Popup template on Index.shtml page it's working as expected. Please advise.

TreeView

answered on 06 Apr 2021

2 answers

900 views

KendoEditor Changes in Grid's Popup Editor Not Saving

Currently my grid implementation is using the popup editor and a kendo template to render the markup. I was able to use the KendoEditor widget (rich-text editor) inside the popup by calling it inside the grid's Edit event. Making normal text changes does not pose a problem, but when I make changes using the KendoEditor features (bold, italics, bullets, etc.) the grid does not save, and the grid field in question (HeadLine) is marked as dirty. How do I get around this? Thank you.

Markup:

<body>

<div id="grid"></div>

<script id="popup-editor" type="text/x-kendo-template">

<form class="k-form k-form-vertical" id="headline-popup">

<div>

<label class="k-edit-label" for="Headline">News Headline</label>

<div class="k-edit-field">

<textarea id="headline-test" name="HeadLine" rows="4">#: HeadLine#</textarea>

</div>

</form>

</script>

</body>

JavaScript:

$("#grid").kendoGrid({

dataSource: data,

columns: [

{ field: "Headline", title: "News Headline", width: "5%", headerAttributes: { "class": "font-weight-bold" } },

{ command: ["edit"], width: "10%" }

],

editable: {

mode: "popup",

template: kendo.template($("#popup-editor").html()),

},

edit: function (e) {

$("#headline-test").kendoEditor({});

},

});

Grid

answered on 05 Apr 2021

5 answers

559 views

popups offset incorrect when body margin set to auto

On my page I have my body element centered in the browser window with body { margin: 0 auto; }. When I trigger any popup, such as an autocomplete list or kendo window, the popup wrapper is positioned too far to the right.

For example, if the body's left offset is 400px, then that's how far off to the right the popup window is misplaced. If I shrink my browser window so it just fits the body (making the body margin effectively 0) then the popup is positioned correctly.

So, it appears that having an auto margin on a parent element is not being handled properly when calculating the position of the popup container.

General Discussions

answered on 05 Apr 2021

15 answers

2.3K+ views

Add tooltip to dropdown items

How can I add a tooltip to my dropdown running in MVC? I have tried several ways I found online and in the forum but no luck.

html page code:

how can I add a tool tip to this drop down? I want to show some more details about the car when the users hovers over it

<select id='cars' class='dropdownlist'>

<option value=0>Select make</option>

<option value='@Model.NewCars.CarId'>@Model.NewCars</option>

</select>

DropDownList

answered on 05 Apr 2021

12 answers

1.0K+ views

html in window.title

after upgrading to 2017 the html I have in my title property is not rendered as html.

Has this changed?

I used to have something like this:

filters.kendoWindow({

            width: "210px",
            height: "470px",
            title: "Filters <span class='ise-window-title-post-fix'>drag me</span>",
            position: { top: 100, left: 5 },
            pinned: true,
            visible: false,

Window

answered on 05 Apr 2021

4 answers

213 views

Kendo and jQuery compatibility?

Hello folks,
I have a question related to Kendo and jQuery compatibility. In my project, we rely on Kendo UI for jQuery for most of our UX components. We are using Kendo UI version 2018.1.117 and the jQuery version 1.12.2.
We are trying to upgrade jQuery to 3.5 and want to know if this will still work with our current Kendo version (2018.1.117). I understand jQuery and Kendo are closely related and we eventually want to upgrade Kendo to latest 2020.2.617 too but upgrading both at the same time is not something we would prefer. We prefer to take incremental approach of upgrading jQuery first, followed by Kendo upgrade.
Documentation here specifies the supported jQuery version for Kendo. Is there any documentation that will point what components will break if we are at an unsupported jQuery version? I did a quick spike with [ Kendo 2018.1.117 + jQuery 3.5 ] and there were no visible issues.
Looking for your suggestions here. Thank you!

General Discussions

answered on 04 Apr 2021

4 answers

763 views

adding child node to selected node

Hello.

I modifed an example from demo. To add one child node to selected node.

https://dojo.telerik.com/uhUnukOJ/3

Left side is copy from demo, right side other simple version.

Right side add only to the root. And left side works strange.

Second. I have config a hierarhicalDataSource

var treeData = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "api/ui/UIData/folders",
contentType: "application/json",
dataType: "json",
data:
{
id_hierarchy: 1
}
} ,

requestEnd: function (e)
{
//check the "response" argument to skip the local operations
console.log(e);
}
}
});

It loads root nodes. But does not show any children nodes after loading. requestEnd does not fire too.

TreeView

answered on 02 Apr 2021

1 answer

129 views

Spreadsheet inside dialog widget

Hi guys, I am having an issue with the spread inside a dialog. I can get the spreadsheet working on a html page, but once i put it inside a model , it just start having weird behaviors. Can you guys take a look and let me know? Thanks. Here is an example I made on Dojo UI

https://dojo.telerik.com/EQORuVuS

Spreadsheet

answered on 02 Apr 2021

1 answer

503 views

Font Awesome + kendo webcomponent glyph conflict

I have both the glyph fonts installed and used in my MVC.net web application, some of the contents in classes are common e.g. e005 is used for different icon in kendo and for different icon in font-awesome.

.k-i-arrow-60-right:before {
content: "\e005";
}

so by default above class should show me an arrow icon, it shows faucets icon from font-awesome.

to overcome this, i need to specify the font-file for every such class

.k-i-arrow-60-right:before {
content: "\e005";
font-family: WebComponentsIcons;
}

i want to avoid this.

any help will be appriciated.

General Discussions