jube-fork/Jube.App/wwwroot/kendo/examples/treelist/api.html

<!DOCTYPE html>
<html>
<head>
    <title>API</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="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Selection</h4>
            <ul class="options">
                <li>
                    <input type="text" value="0" id="selectRow" class="k-textbox" />
                    <button class="selectRow k-button">Select row</button>
                </li>
                <li>
                    <button class="clearSelection k-button">Clear selected rows</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Expand / Collapse</h4>
            <ul class="options">
                <li>
                    <input type="text" value="0" id="groupRow" class="k-textbox" />
                    <button class="toggleGroup k-button">Collapse/Expand group</button>
                </li>
            </ul>
        </div>
    </div>

    <div id="treelist"></div>

    <script>
        $(document).ready(function () {
            $(".clearSelection").click(function () {
                $("#treelist").data("kendoTreeList").clearSelection();
            });

            var selectRow = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                    var treelist = $("#treelist").data("kendoTreeList"),
                        rowIndex = $("#selectRow").val(),
                        row = treelist.content.find("tr:visible").eq(rowIndex);

                    treelist.select(row);
                }
            };

            var toggleGroup = function (e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                    var treelist = $("#treelist").data("kendoTreeList"),
                        rowIndex = $("#groupRow").val(),
                        row = treelist.content.find("tr:visible").eq(rowIndex);

                    if (row.has(".k-i-collapse").length) {
                        treelist.collapse(row);
                    } else {
                        treelist.expand(row);
                    }
                }
            };


            $(".selectRow").click(selectRow);
            $("#selectRow").keypress(selectRow);

            $(".toggleGroup").click(toggleGroup);
            $("#groupRow").keypress(toggleGroup);

            /* TreeList definition */

            var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

            var dataSource = new kendo.data.TreeListDataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/EmployeeDirectory",
                        dataType: "jsonp"
                    }
                },
                schema: {
                    model: {
                        id: "EmployeeId",
                        parentId: "ReportsTo",
                        fields: {
                            EmployeeId: { type: "number", nullable: false },
                            ReportsTo: { field: "ReportsTo", nullable: true }
                        }
                    }
                }
            });

            $("#treelist").kendoTreeList({
                dataSource: dataSource,
                selectable: true,
                columns: [
                    { field: "FirstName", expandable: true, title: "First Name" },
                    { field: "LastName", title: "Last Name" },
                    { field: "Position" },
                    { field: "Extension", title: "Ext", format: "{0:#}" }
                ]
            });

        });
    </script>
</div>


    
</body>
</html>