This is a migrated thread and some comments may be shown as answers.

TreeView: Not rendering for subtree nodes

4 Answers 227 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Bharathi asked on 23 Mar 2017, 11:51 AM

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="">
Digital Studio Images
( 18 )
<ul class="tree-level-2">
<li class="">
Allure
( 1 )
<ul class="tree-level-3">
<li class="final">
AL Digital Studio
( 1 )
</li>
</ul>
</li>
</ul>
<ul class="tree-level-2">
<li class="">
Bon Appetit
( 2 )
<ul class="tree-level-3">
<li class="final">
BA Digital Studio
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
BA Web Digital Studio
( 1 )
</li>
</ul>
</li>
</ul>
<ul class="tree-level-2">
<li class="">
Cargo
( 1 )
<ul class="tree-level-3">
<li class="final">
Cargo Digital Studio
( 1 )
</li>
</ul>
</li>
</ul>
<ul class="tree-level-2">
<li class="">
Glamour
( 2 )
<ul class="tree-level-3">
<li class="final">
GL Digital Studio
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
GL Digital Studio 2007
( 1 )
</li>
</ul>
</li>
</ul>
<ul class="tree-level-2">
<li class="">
Golf
( 2 )
<ul class="tree-level-3">
<li class="final">
GW Digital Studio
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
Golf Digest Digital Studio
( 1 )
</li>
</ul>
</li>
</ul>
<ul class="tree-level-2">
<li class="">
Gourmet
( 2 )
<ul class="tree-level-3">
<li class="final">
Gourmet Book Digital Studio
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
Gourmet Digital Studio
( 1 )
</li>
</ul>
</li>
</ul>
<ul class="tree-level-2">
<li class="">
Teen Vogue
( 7 )
<ul class="tree-level-3">
<li class="final">
TV DS 201302
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
TV DS 201308
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
TV DS Web 2013 B
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
TV Digital Studio
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
TV Digital Studio 2014
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
TV Digital Studio 2015
( 1 )
</li>
</ul>
<ul class="tree-level-3">
<li class="final">
Teen Vogue Digital Studio
( 1 )
</li>
</ul>
</li>
</ul>
<ul class="tree-level-2">
<li class="">
Vogue
( 1 )
<ul class="tree-level-3">
<li class="final">
Vogue Digital Studio
( 1 )
</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?

4 Answers, 1 is accepted

Accepted

answered on 24 Mar 2017, 07:49 AM

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 class="frequency">( 18 )

<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.