<div class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Expand / Collapse</h4>
        <ul class="options">
            <li>
                <button id="expandAllNodes">Expand all nodes</button>
            </li>
            <li>
                <button id="collapseAllNodes">Collapse all nodes</button>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Enable / Disable</h4>
        <ul class="options">
            <li>
                <button id="disableNode">Disable node</button>
            </li>
            <li>
                <button id="enableAllNodes">Enable all nodes</button>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Add / Remove</h4>
        <ul class="options">
            <li>
                <input id="appendNodeText" value="Node" />
                <button id="appendNodeToSelected">Append node</button>
            </li>
            <li>
                <button id="removeNode">Remove node</button>
            </li>

        </ul>
    </div>

    <div class="box-col">
        <h4>DataSource interaction</h4>
        <ul class="options">
            <li>
                <button id="sortDataSource">Sort</button>
            </li>
            <li>
                <input id="filterText" value="Item 1" />
                <button id="filterDataSource">Filter by text</button>
            </li>
        </ul>
    </div>
</div>

<div class="demo-section">
    @(
        Html.Kendo().TreeView()
            .Name("treeview")
            .Items(items =>
            {
                items.Add().Text("Item 1").Expanded(true)
                    .Items(subItems =>
                    {
                        subItems.Add().Text("Item 1.1");
                        subItems.Add().Text("Item 1.2");
                        subItems.Add().Text("Item 1.3");
                    });
                items.Add().Text("Item 2")
                    .Items(subItems =>
                    {
                        subItems.Add().Text("Item 2.1");
                        subItems.Add().Text("Item 2.2");
                        subItems.Add().Text("Item 2.3");
                    });
                items.Add().Text("Item 3");
            })
    )
</div>
<script>
    $(document).ready( function () {
        var treeview = $("#treeview").data("kendoTreeView"),
            handleTextBox = function (callback) {
                return function (e) {
                    if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                        callback(e);
                    }
                };
            };


        $("#disableNode").click(function () {
            var selectedNode = treeview.select();

            treeview.enable(selectedNode, false);
        });

        $("#enableAllNodes").click(function () {
            var selectedNode = treeview.select();

            treeview.enable(".k-treeview-item");
        });

        $("#removeNode").click(function () {
            var selectedNode = treeview.select();

            treeview.remove(selectedNode);
        });

        $("#expandAllNodes").click(function () {
            treeview.expand(".k-treeview-item");
        });

        $("#collapseAllNodes").click(function () {
            treeview.collapse(".k-treeview-item");
        });

        var append = handleTextBox(function (e) {
            var selectedNode = treeview.select();

            // passing a falsy value as the second append() parameter
            // will append the new node to the root group
            if (selectedNode.length == 0) {
                selectedNode = null;
            }

            treeview.append({
                text: $("#appendNodeText").val()
            }, selectedNode);
        });

        $("#appendNodeToSelected").click(append);
        $("#appendNodeText").keypress(append);

        // datasource actions

        var ascending = false;

        $("#sortDataSource")
            .text(ascending ? "Sort ascending" : "Sort descending")
            .click(function () {
                treeview.dataSource.sort({
                    field: "text",
                    dir: ascending ? "asc" : "desc"
                });

                ascending = !ascending;

                $(this).text(ascending ? "Sort ascending" : "Sort descending")
            });

        var filter = handleTextBox(function (e) {
            var filterText = $("#filterText").val();

            if (filterText !== "") {
                treeview.dataSource.filter({
                    field: "text",
                    operator: "contains",
                    value: filterText
                });
            } else {
                treeview.dataSource.filter({});
            }
        });

        $("#filterDataSource").click(filter);
        $("#filterText").keypress(filter);
    });
</script>
<style>
    .box .k-textbox {
        width: 100px;
    }
</style>