javascriptjquerykendo-treeview

how do I collpase and expand all tree nodes in a Kendo UI treeView based on a button click?


This is not working:

<script type="text/javascript">
            $('#btnCollapseAll').click(function()
            {
                $('#treeview').collapseAll();
            });
</script>

Solution

  • You can use this code

    1: collapse

    collapse kendoTreeView document

        $("#treeview").kendoTreeView();
                var treeview = $("#treeview").data("kendoTreeView");
                treeview.collapse(document.getElementById("firstItem"));
                $('#btn').click(function () {
                    // collapse the node with id="firstItem"
    
                    // collapse all nodes
                    treeview.collapse(".k-item");
                });
    

    2:expand

    expand kendoTreeView document

     $("#treeview").kendoTreeView();
            var treeview = $("#treeview").data("kendoTreeView");
            treeview.collapse(document.getElementById("firstItem"));
            $('#btn').click(function () {
                // expand the node with id="firstItem"
    
                // expand all nodes
                treeview.expand(".k-item");
            });