The labels of the whole tree are empty when the root parent has child items

[Gil]

While selecting an item from the dropdowntree control, items without children shows-up properly but those with child items don't have labels, including the child items. The <span class='k-in'> is empty, it is direct-child of <div class='k-bot'> which is under the <li role='treeitem'>.

I followed this example but omitted the second mapping because from the root parents to the children, they share the same structure. IEnumerable of my "TreeItem" class:

public class TreeItem<T>{

public T Item {get;set;}

public IEnumerable<TreeItem<T>> Children {get;set;}

public bool HasChildren {

get {

return this.Children != null && this.Children.Coun() > 0;

}

}

}

 

And here's how I configured the binding part:

@(Html.Kendo().DropDownTree()

.Name("Categories")

.BindTo(Model.CategoriesList, mapping => {

mapping.For<TreeItem<Category>>(binding => binding

.Children(c => c.Children)

.ItemDataBound((item, categ) => {

item.Expanded = true;

item.HasChildren = categ.HasChildren;

item.Id = categ.Item.Id;

item.Text = categ.Item.Name;

item.Value = categ.Item.Id.ToString();

})

)

})

.LoadOnDemand(false)

)

the Model.CategoriesList is IEnumerable<TreeItem<Category>> which makes it the same structure as the Children of the TreeItem<Category> in here, if it matters.

[Ivan Danchev]

Hello Gil,

Could you send us a sample project that demonstrates the issue, similarly to the Binding to local data demo? It will give us a better idea of the scenario, e.g., the Category class, as well what data you return from the controller to the view and how the data is structured. We will then investigate whether the DropDownTree can be bound to such data.

Regards,
Ivan Danchev
Progress Telerik

[Gil]

Any other way? I tried to create a project using the references and files from our original project through the source control. I have no access to Telerik account of the company.

[Ivan Danchev]

Gil,

I've attached a sample project that contains the needed files. You can modify it, instead of creating a new one.

Regards,
Ivan Danchev
Progress Telerik

[Gil]

Thank! I modified the code and it looks like it is working fine with this version of Kendo UI.

I'm trying to upload my changes to ask you to check it against 2019.1.220.545 which is the one we're using. But I'm receiving an error "The selected file(s) cannot be attached because it may exceed the maximum attachment size (2 MB) or is from not allowed type (allowed: .jpg, .jpeg, .gif, .png, .zip).". I already compressed the project to .zip(using 7zip with normal/default compression). The one you have uploaded is 14.1MB so I assume that I'm allowed to do the same. So I just exported the files I changed(.csproj, HomeController, some models, and index.cshtml), I believe you can just overwrite your existing files.

Please check if the issue is on the version of the library. I might need to ask our team leader to upgrade to the one you have provided or to the latest version. Thanks!

[Petar]

Hi Gil,

Attached to my reply, you will find a runnable example that uses the project sent by Ivan and has the changes you've shared applied to it.

The project uses version 2019.1.220 and everything seems to be OK with the DropDownTree.

I hope the provided example will be useful for you and will prove that the functionality that you need can be implemented in the product version that you use.

Regards,
Petar
Progress Telerik

[Gil]

Thanks, I tried it and it works on the copy of project you have provided.

So, I tried using this example on the project you have provided and our project. https://demos.telerik.com/kendo-ui/dropdowntree/index

It works fine on the project you have provided, but the issue still persist on our project. When I checked the HTML generated, they are both inconsistent.

Here is the HTML generated using your project:

<li role="treeitem" class="k-item k-first" data-uid="a65ff867-88bb-4d48-8e87-074a91369e2a" aria-selected="true" aria-expanded="true" data-expanded="true" id="6bbd9895-effe-4632-82ee-94b1cf751e69_tv_active">
   <div class="k-top"><span class="k-icon k-i-collapse"></span><span class="k-in k-state-selected">Furniture</span></div>
   <ul class="k-group" role="group" style="display: block;">
      <li role="treeitem" class="k-item" data-uid="4cbc48fa-0d5b-4529-8cfc-022a5ebab56f" aria-selected="false" aria-expanded="false" data-expanded="false">
         <div class="k-top"><span class="k-in">Tables &amp; Chairs</span></div>
      </li>
      <li role="treeitem" class="k-item" data-uid="7a189868-04fe-4524-bf76-0eae8b89ff26" aria-selected="false" aria-expanded="false" data-expanded="false">
         <div class="k-mid"><span class="k-in">Sofas</span></div>
      </li>
      <li role="treeitem" class="k-item k-last" data-uid="c0a648af-4c4a-48ac-ab75-e82c1e71df2f" aria-selected="false" aria-expanded="false" data-expanded="false">
         <div class="k-bot"><span class="k-in">Occasional Furniture</span></div>
      </li>
   </ul>
</li>

 

And here's from out project:

<li role="treeitem" class="k-item k-first" data-uid="2b7f990e-c636-4e53-adbd-ee03f40a0606" aria-selected="true" aria-expanded="true" data-expanded="true" id="1ff70919-5787-4eef-be34-fb64eeec8351_tv_active">
   <div class="k-top"><span class="k-icon k-i-collapse"><span class="k-in k-state-selected">Furniture</span></span><span class="k-in"></span></div>
   <ul class="k-group" role="group" style="display: block; overflow: visible;">
      <li role="treeitem" class="k-item" data-uid="2a390cf2-b49c-4594-879a-24d0bec89847" aria-selected="false" aria-expanded="false" data-expanded="false">
         <div class="k-top"><span class="k-in">Tables &amp; Chairs</span></div>
      </li>
      <li role="treeitem" class="k-item" data-uid="82ea90fb-9fa4-4ce3-91b0-99c4b4b7457a" aria-selected="false" aria-expanded="false" data-expanded="false">
         <div class="k-mid"><span class="k-in">Sofas</span></div>
      </li>
      <li role="treeitem" class="k-item k-last" data-uid="6b483ea9-394f-4ee1-aaaf-fa1334fb5dfc" aria-selected="false" aria-expanded="false" data-expanded="false">
         <div class="k-bot"><span class="k-in">Occasional Furniture</span></div>
      </li>
   </ul>
</li>

 

The extracted HTML contents are extracted on the state where the selection is open and the first item, which is "Furniture", was pre-selected.

If you look closely, the structure of <span class="k-icon k-i-collapse"> under <div class="k-top"> are totally different despite of using the same base codes. What should we check on our code to ensure that it will generate the same exact structure? Thanks!

[Petar]

Hi Gil,

Can you check the version of the Kendo UI related CSS files that you load in your project and also the version of the kendo.all.min.js file? Is it the same as the version of the DLL loaded for the project that you work on? If you are using CDN to load the scripts and the CSS files, you can check the _Layout file and see the version of the files in the URL to the CDN. 

If you are loading the discussed files from a local location, then you can open the kendo.all.min.js and the CSS files of the Kendo UI theme that you use and see the file version at the beginning of each file. 

If the version of the JavaScript and CSS files is different from the DLL version, you should unify them.

Check the suggested approach and let me know if it resolves the issue on your end. Don't forget to clear your browser's cache or open the project in an incognito tab to test the new JS and CSS files when you change them. 

Regards,
Petar
Progress Telerik

[Gil]

I confirmed that we're using v2019.1.220 for kendo.all.min.js and for the css files kendo.default.min.css and kendo.common.min.css. Then I realized we're using JQuery 3.5.1 instead of v1.12.4 which is packaged with Kendo-UI so I replaced that line in the project you have provided to me with that version, and it happened to this project too.

Any way to fix it without reverting to v1.12.4 of JQuery? We have some libraries and functions that requires JQuery v3.5.1. I think it is fine for us to upgrade to the latest version of Kendo UI if that version uses JQuery 3.5.1 but doing will require us to perform thorough testing which we cannot afford right now because we have lots of deadlines and limited manpower.

[Petar]

Hi Gil,

Kendo UI for jQuery version 2019.1.2020 is not compatible with jQuery 3.5.1. Here is a list of the different versions of the suite that work with jQuery 3.5.1. 

What you can do is either upgrade to a newer product version or use jQuery 1.12.4.

Regards,
Petar
Progress Telerik

[Gil]

Any way to force our version of Kendo to use jquery v1.12.4 only while not affecting our other libraries? Upgrading and testing everything is not something we can't afford because of the small manpower of our team and we have tons of deadlines. Thanks!

[Gil]

I found that jQuery has a $.noConclict(true) method to be able to use different versions of jQuery and it looks like you are using window.kendo.jQuery. Is it alright to assume that this is the one you are using instead of $, window.$, jQuery, and window.jQuery? If yes, how should I assign it to use version 1.12.4?

I tried different placement of jQuery versions and the noConflict codes but nothing didn't worked.

The image I attached probably is the closest one but it still didn't worked.

[Petar]

Hi Gil,

I don't have experience with the usage of the shared noConflict method and I cannot say how it should be configured.

What I can confirm is that the time gap between the release of Kendo UI Version 2019.1.2020  and the release of jQuery 3.5.1 is a year and a half and there will be issues when you use the two product versions simultaneously. Version 2019.1.2020 of Kendo UI for jQuery and jQuery 3.5.1 are incompatible. 

Different changes had been applied to the Kendo UI for jQuery libraries that are compatible with jQuery 3.5.1. Even though you manage to run your application with jQuery 3.5.1, there will be issues with the usage of the different widgets.   

Regards,
Petar
Progress Telerik