TreeView: Not rendering for subtree nodes

5 posts, 1 answers
  1. Bharathi
    Bharathi avatar
    3 posts
    Member since:
    Jan 2017

    Posted 23 Mar 2017 Link to this post

    Hi Team,

     

    I am facing issues with visualizing a kendotree after updating the kendo ui to the latest Kendo UI v2017.1.223 from 2012 version.

    Input:

    <ul class="tree-level-1" xmlns="">
    <li class="">
    <span class="leaf packageType">Digital Studio Images</span>
    <span class="frequency">( 18 )</span>
    <ul class="tree-level-2">
    <li class="">
    <span class="leaf brand">Allure</span>
    <span class="frequency">( 1 )</span>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">AL Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="tree-level-2">
    <li class="">
    <span class="leaf brand">Bon Appetit</span>
    <span class="frequency">( 2 )</span>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">BA Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">BA Web Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="tree-level-2">
    <li class="">
    <span class="leaf brand">Cargo</span>
    <span class="frequency">( 1 )</span>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">Cargo Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="tree-level-2">
    <li class="">
    <span class="leaf brand">Glamour</span>
    <span class="frequency">( 2 )</span>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">GL Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">GL Digital Studio 2007</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="tree-level-2">
    <li class="">
    <span class="leaf brand">Golf</span>
    <span class="frequency">( 2 )</span>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">GW Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">Golf Digest Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="tree-level-2">
    <li class="">
    <span class="leaf brand">Gourmet</span>
    <span class="frequency">( 2 )</span>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">Gourmet Book Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">Gourmet Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="tree-level-2">
    <li class="">
    <span class="leaf brand">Teen Vogue</span>
    <span class="frequency">( 7 )</span>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">TV DS 201302</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">TV DS 201308</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">TV DS Web 2013 B</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">TV Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">TV Digital Studio 2014</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">TV Digital Studio 2015</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">Teen Vogue Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    </li>
    </ul>
    <ul class="tree-level-2">
    <li class="">
    <span class="leaf brand">Vogue</span>
    <span class="frequency">( 1 )</span>
    <ul class="tree-level-3">
    <li class="final">
    <span class="leaf packageName">Vogue Digital Studio</span>
    <span class="frequency">( 1 )</span>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

     

    Script:

    // Enable browse tree
        $("#treeView").kendoTreeView({
            select: function(e) {
                var treeview = $("#treeView").data("kendoTreeView");
                var node = e.node;
                treeview.expand(node);
            }
        });

     

    Only the first node second level node expands. On investigating the treeview HTML generated in the source, i see the <data-uid> attribute property not forming for the second level data except for Digital Studio Images--> Allure--> AL Digital Studio(this alone expands).

     

    Also, there is an error thrown in the background:

    Uncaught TypeError: Cannot read property 'uid' of undefined
        at init._syncHtmlAndDataSource (http://digitalarchivedev.condenast.com/resources/js/kendo.all.min.js:64:30695)
        at init._syncHtmlAndDataSource (http://digitalarchivedev.condenast.com/resources/js/kendo.all.min.js:64:30878)
        at init._syncHtmlAndDataSource (http://digitalarchivedev.condenast.com/resources/js/kendo.all.min.js:64:30878)
        at new init (http://digitalarchivedev.condenast.com/resources/js/kendo.all.min.js:64:29252)
        at HTMLUListElement.<anonymous> (http://digitalarchivedev.condenast.com/resources/js/kendo.all.min.js:26:4368)
        at Function.each (http://digitalarchivedev.condenast.com/resources/js/jquery-1.12.3.min.js:2:2881)
        at a.fn.init.each (http://digitalarchivedev.condenast.com/resources/js/jquery-1.12.3.min.js:2:846)
        at a.fn.init.e.fn.(anonymous function) [as kendoTreeView] (http://digitalarchivedev.condenast.com/resources/js/kendo.all.min.js:26:4345)
        at HTMLDocument.<anonymous> (http://digitalarchivedev.condenast.com/resources/scripts/packageManager.js:36:20)
        at i (http://digitalarchivedev.condenast.com/resources/js/jquery-1.12.3.min.js:2:27449)

     

    Appreciating your help on why the second level tree elements are not expanding due to the above error. If data-uid property missing is the problem, why it is not getting formed? 

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2088 posts

    Posted 24 Mar 2017 Link to this post

    Hello Bharathi,

    The reason for the exception being thrown is invalid HTML that you build the TreeView from. Instead of just one you nest multiple ul elements within a li element:
    <ul class="tree-level-1" xmlns="">
      <li class="">
        <span class="leaf packageType">Digital Studio Images</span>
        <span class="frequency">( 18 )</span>
        <ul class="tree-level-2">
          ...
        </ul>
        <ul class="tree-level-2">
         ...
        </ul>
        <ul class="tree-level-2">
         ...
        </ul>


    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Bharathi
    Bharathi avatar
    3 posts
    Member since:
    Jan 2017

    Posted 24 Mar 2017 in reply to Ivan Danchev Link to this post

    Thanks a lot Evan! That worked after modifying the HTML structure. But this had worked with the previous versions with multile <ul>'s?

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2088 posts

    Posted 28 Mar 2017 Link to this post

    Hi Bharathi,

    It is possible that such HTML structure worked in a particular older version, but I haven't been able to found one that worked without throwing an exception. I tested several versions from different years between 2017 and 2012 (2012.3.1315) and with all of them a js exception was thrown.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Bharathi
    Bharathi avatar
    3 posts
    Member since:
    Jan 2017

    Posted 29 Mar 2017 in reply to Ivan Danchev Link to this post

    It was working fine with v2012.1.322. Anyways thanks for looking into it,Ivan!
Back to Top