Change your code to:
$.getJSON("/testTree.json", function (data) {
$("#treeview").kendoTreeView({
dataSource: {
data : data
}
});
});
Initializing the DataSource from an object instead of from an array seems to be much faster.
The code in your web-site would read (after some minor cleaning) as:
<head>
<title> Json Tree</title>
<link href="styles/kendo.common.min.css" rel="stylesheet"/>
<link href="styles/kendo.default.min.css" rel="stylesheet"/>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<div class="demo-section" style="float:left;">
<h3 class="title">Select Continents</h3>
<div id="treeview" class="demo-section"></div>
</div>
<body>
<script type="text/javascript" charset=utf-8>
// $(document).ready(function () {
$.getJSON("/js/region_tree.json", function (data) {
$("#treeview").kendoTreeView({
dataSource : {
data: data
},
dataTextField : "text",
dataValueField: "id"
});
});
// });
</script>
</body>
You might also do:
<script type="text/javascript" charset=utf-8>
$(document).ready(function () {
var tree = $("#treeview").kendoTreeView({
dataTextField : "text",
dataValueField: "id"
}).data("kendoTreeView");
$.getJSON("/js/region_tree.json", function (data) {
tree.dataSource.data(data);
});
});
</script>
Where after reading the JSON
using getJSON
I directly assign it to the dataSource
of the tree.