Kendo TreeList Demo With Source Code

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>