I am working on kendo TreeView control and trying to display tree structure in the grid but I am always getting an error from the control No records to display.
Could any one please help me to identify my mistake.
<body>
<div id="treelist"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ "UserId": 0, "ParentUserId": null, "Name": "Abhishek" },
{ "UserId": 1, "ParentUserId": 0, "Name": "Ravi" },
{ "UserId": 2, "ParentUserId": 1, "Name": "Manish" },
{ "UserId": 3, "ParentUserId": 1, "Name": "Anuj" },
{ "UserId": 4, "ParentUserId": null, "Name": "Shiv" },
{ "UserId": 5, "ParentUserId": null, "Name": "Ram" },
{ "UserId": 6, "ParentUserId": 5, "Name": "Kashi" },
{ "UserId": 7, "ParentUserId": 5, "Name": "Ekansh" },
{ "UserId": 8, "ParentUserId": 7, "Name": "Tanmay" },
{ "UserId": 9, "ParentUserId": 7, "Name": "Rahul" }
],
schema: {
model: {
id: "UserId",
parentId: "ParentUserId",
fields: {
UserId: { type: "number", nullable: false },
ParentUserId: { field: "ParentUserId", nullable: true }
},
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
columns: [{ field: "Name" }]
});
});
</script>
</body>Any help is highly appreciated
Thanks in advance
Your code is perfect. No changes are to be done except '.js' files. Please update your following files and try again.