Files
jube-fork/Jube.App/wwwroot/kendo/examples/treelist/aggregates.html
2022-11-04 13:24:24 +02:00

76 lines
2.7 KiB
HTML
Executable File

<!DOCTYPE html>
<html>
<head>
<title>Aggregates</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jszip.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function() {
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
parentId: "ReportsTo",
fields: {
ReportsTo: { nullable: true },
EmployeeId: { type: "number" },
HireDate: { field: "HireDate", type: "date" }
}
}
},
aggregate: [
{ field: "FirstName", aggregate: "count" },
{ field: "HireDate", aggregate: "max" }
]
},
height: 540,
filterable: true,
sortable: true,
columns: [
{ field: "FirstName", title: "Name",
template: "#: FirstName # #: LastName #",
footerTemplate: "#= count # employee(s)" },
{ field: "Position" },
{ field: "HireDate", title: "Hire Date", format: "{0:MMMM d, yyyy}",
footerTemplate: "Last employee hired on #= kendo.format('{0:MMMM d, yyyy}', max) #" }
]
});
});
</script>
</div>
</body>
</html>