I need to display all the records in a kendo view tree view at one go. Means at load of tree, I want all the nodes of my hierarchical data to be displayed. When data is less, I am getting no issue. But when my data is high, I am getting stack overflow error at line number:3, say.

When I debug the visual studio code, I get : "0x800a001c - Microsoft JScript runtime error: Out of stack space"

Actually what is happening, when a child node is displayed, kendo checks for the parent node. So if we have multiple child nodes, recursive calls are happening to get the parent node. With huge data, recursive calls are huge. Hence getting stack overflow error. Can anyone here help me out what I should change in my code.

I am using MVC for this. And 'treeData' contains json data. The data is coming from the service in hierarchical format.

_intializeStudentTree: function () {
var abc = this;
var treeData = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "controller1/method1",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
options['StudentID'] = abc.options.list.StudentId;
options['StudentDetails'] = abc.options.list.StudentDetails;
return JSON.stringify(options);
}
},
schema: {
model: {
children: "ChildRecords"
}
}
});

abc.ListTree = abc.element.find('.tree-view').kendoTreeView({
template: kendo.template($("#temp-treeview").html()),
animation: {
expand:false
},
dataSource: treeData,
dataTextField: ["StudentLevel"],
loadOnDemand: false,
dataBound: function () {
abc.ListTree.expand(".k-item");
}
}).data('kendoTreeView');
},