<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/11.0.2/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var service = "https://demos.telerik.com/service/v2/core";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
sortable: true,
resizable: true,
reorderable: true,
columnMenu: true,
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
field: "Position"
}, {
title: "Personal Info",
columns: [{
field: "LastName", title: "Last Name", width: 120
}, {
title: "Location",
columns: [{
field: "City", width: 140
}, {
field: "Country", width: 140
}]
}, {
field: "Phone"
}]
}]
});
});
</script>
</div>
</body>
</html>