Files
2022-11-04 13:24:24 +02:00

96 lines
2.7 KiB
HTML
Executable File

<!DOCTYPE html>
<html>
<head>
<title>Binding to local data</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 class="demo-section k-content">
<div>
<h4>Inline data (default settings)</h4>
<div id="treeview-left"></div>
</div>
<div>
<h4>Inline data</h4>
<div id="treeview-right"></div>
</div>
</div>
<script>
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [
{ text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
var inline = new kendo.data.HierarchicalDataSource({
data: [
{ categoryName: "Storage", subCategories: [
{ subCategoryName: "Wall Shelving" },
{ subCategoryName: "Floor Shelving" },
{ subCategoryName: "Kids Storage" }
] },
{ categoryName: "Lights", subCategories: [
{ subCategoryName: "Ceiling" },
{ subCategoryName: "Table" },
{ subCategoryName: "Floor" }
] }
],
schema: {
model: {
children: "subCategories"
}
}
});
$("#treeview-right").kendoTreeView({
dataSource: inline,
dataTextField: [ "categoryName", "subCategoryName" ]
});
</script>
<style>
.demo-section{
display:flex;
justify-content:space-evenly;
}
</style>
</div>
</body>
</html>