This is solved and doesn't need to be answered. I just put it here in case someone runs into the same problem.
A treeview item says it has children altough there are no children by using "hasChildren":
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<script src=
"https://code.jquery.com/jquery-3.2.1.min.js"
integrity=
"sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin=
"anonymous"
></script>
<link rel=
"stylesheet"
href=
"http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.blueopal.min.css"
/>
<script src=
"http://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"
></script>
<script src=
"http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"
></script>
</head>
<script>
$(document).ready(
function
() {
// Bind dropdownlist
$(
"#mytree"
).kendoTreeView({
animation:
false
,
dataSource: [
{
'id'
:
'1'
,
'text'
:
'One child entry'
,
'expanded'
:
'true'
,
"items"
: [ {
'id'
:
"2"
,
'text'
:
"No child entry"
,
"items"
: []} ] }
],
select:
function
(e) {
var
treeItem =
this
.dataItem(e.node);
if
(treeItem.hasChildren) { alert (
"Entry has children"
); }
else
{ alert (
"Entry has no children"
); }
}
});
});
</script>
<body>
<div id=
"mytree"
style=
"clear: both;"
></div>
</body>
</html>
You can run this code and click on the treeview entry "No child entry". It will tell you it has children! Why? The problem is on the predefinition in the datasource: ... ,"items": []
Remove that and it will work fine. I thought the Treeview Widget would take that over or replace it. But since it outputs wrong result, don't use it that way.