TreeView: Not rendering for subtree nodes

[Bharathi]

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? 

[Ivan Danchev]

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

[Bharathi]

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

[Ivan Danchev]

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

[Bharathi]

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