Kendo UI TreeList Example
Source Code:-
<h2>Kendo Treeview demo with source code</h2> <div id="codeviewexample"> <div id="Codeviewtreelist"></div> <link rel="stylesheet" href="http://cdn.kendostatic.com/2017.1.118/styles/kendo.common-material.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2017.1.118/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2017.1.118/styles/kendo.common.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> <script> $(function () { var positionHeirarchy = [{ id: 1, Name: "Mr. XXX", Position: "CEO", Phone: "(555) 924-9726", parentId: null }, { id: 2, Name: "Sam Billing", Position: "Manager", Phone: "(438) 738-4935", parentId: 1 }, { id: 3, Name: "Anil ", Position: "Team Lead", Phone: "(438) 738-4935", parentId: 2 }, { id: 4, Name: "Robin", Position: "Team Lead", Phone: "(438) 738-4935", parentId: 2 }, { id: 5, Name: "Alok ", Position: "SSE", Phone: "(438) 738-4935", parentId: 3 }, { id: 6, Name: "Rahul ", Position: "SSE", Phone: "(438) 738-4935", parentId: 3 }, { id: 7, Name: "Ronit ", Position: "Developer", Phone: "(438) 738-4935", parentId: 3 }, { id: 8, Name: "Kashyap ", Position: "Developer", Phone: "(438) 738-4935", parentId: 3 }, { id: 9, Name: "Ajay", Position: "QA", Phone: "(438) 738-4935", parentId: 4 }, { id: 10, Name: "Sanjay", Position: "Designer", Phone: "(438) 738-4935", parentId: 4 }, { id: 11, Name: "Shivesh", Position: "TCC", Phone: "(438) 738-4935", parentId: 4 }, { id: 12, Name: "Sumit", Position: "Trainee", Phone: "(438) 738-4935", parentId: 4 }]; var dataSource = new kendo.data.TreeListDataSource({ data: positionHeirarchy, schema: { model: { id: "id", expanded: true } } }); $("#Codeviewtreelist").kendoTreeList({ dataSource: dataSource, height: 540, columns: [ { field: "Position" }, { field: "Name" }, { field: "Phone" } ] }); }); </script> </div>
No comments:
Post a Comment