<!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="https://unpkg.com/jszip/dist/jszip.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({
toolbar: [ "excel" ],
excel: {
fileName: "Kendo UI TreeList Export.xlsx",
proxyURL: "https://demos.telerik.com/service/v2/core/export",
filterable: true
},
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All"
}
},
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
ReportsTo: { nullable: true },
EmployeeId: { type: "number" }
},
expanded: true
}
}
},
height: 540,
filterable: true,
sortable: true,
columns: [
{ field: "FirstName", title: "First Name", width: 250 },
{ field: "LastName", title: "Last Name" },
{ field: "Position" },
{ field: "Extension" }
]
});
});
</script>
</div>
</body>
</html>