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

13 posts, 0 answers
  1. Gil
    Gil avatar
    7 posts
    Member since:
    Aug 2016

    Posted 06 Dec 2020 Link to this post

    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.

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2187 posts

    Posted 08 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Gil
    Gil avatar
    7 posts
    Member since:
    Aug 2016

    Posted 08 Dec 2020 Link to this post

    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.
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2187 posts

    Posted 09 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  5. Gil
    Gil avatar
    7 posts
    Member since:
    Aug 2016

    Posted 09 Dec 2020 in reply to Ivan Danchev Link to this post

    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!

  6. Petar
    Admin
    Petar avatar
    505 posts

    Posted 11 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  7. Gil
    Gil avatar
    7 posts
    Member since:
    Aug 2016

    Posted 15 Dec 2020 in reply to Petar Link to this post

    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!

  8. Petar
    Admin
    Petar avatar
    505 posts

    Posted 17 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  9. Gil
    Gil avatar
    7 posts
    Member since:
    Aug 2016

    Posted 17 Dec 2020 in reply to Petar Link to this post

    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.

  10. Petar
    Admin
    Petar avatar
    505 posts

    Posted 18 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  11. Gil
    Gil avatar
    7 posts
    Member since:
    Aug 2016

    Posted 20 Dec 2020 in reply to Petar Link to this post

    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!
  12. Gil
    Gil avatar
    7 posts
    Member since:
    Aug 2016

    Posted 20 Dec 2020 Link to this post

    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.

  13. Petar
    Admin
    Petar avatar
    505 posts

    Posted 22 Dec 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top