How to perform 'Expand' and 'Collapse' in Kendo Tree View on click of Expand button and Collapse button

Question

I am new to Kendo control, please help me with this, I already have Tree View as shown in the attachment, Now I have two(Expand and Collapse) buttons, I need to perform the 'Expand All' on click of Expand button and 'Collapse All' on click of Collapse button.

How to perform 'Expand All' and 'Collapse All' in Kendo Tree View on click of Expand button and Collapse button.

Please help me with this.

score 1 · Accepted Answer · answered Oct 11 '18 at 01:55

There is a similar/same question regarding this please check this, you need to combine the answer there. Basically :

There is collapse and expand, which need parameter (the element selector) that will be expanded/closed
In your case all item means -> k.item class
just add jquery on click on the button with those function

like :

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">
          <button id="expand">Expand All</button>
          <button id="collapse">Collapse All</button>
            <div class="demo-section k-content">
                <ul id="treeview">
                    <li data-expanded="true">
                        <span class="k-sprite folder"></span>
                        My Web Site
                        <ul>
                            <li data-expanded="true">
                                <span class="k-sprite folder"></span>images
                                <ul>
                                    <li><span class="k-sprite image"></span>logo.png</li>
                                    <li><span class="k-sprite image"></span>body-back.png</li>
                                    <li><span class="k-sprite image"></span>my-photo.jpg</li>
                                </ul>
                            </li>
                            <li data-expanded="true">
                                <span class="k-sprite folder"></span>resources
                                <ul>
                                    <li data-expanded="true">
                                        <span class="k-sprite folder"></span>pdf
                                        <ul>
                                            <li><span class="k-sprite pdf"></span>brochure.pdf</li>
                                            <li><span class="k-sprite pdf"></span>prices.pdf</li>
                                        </ul>
                                    </li>
                                    <li><span class="k-sprite folder"></span>zip</li>
                                </ul>
                            </li>
                            <li><span class="k-sprite html"></span>about.html</li>
                            <li><span class="k-sprite html"></span>contacts.html</li>
                            <li><span class="k-sprite html"></span>index.html</li>
                            <li><span class="k-sprite html"></span>portfolio.html</li>
                        </ul>
                    </li>
                </ul>
            </div>

            <script>
                $(document).ready(function() {
                    $("#treeview").kendoTreeView();
                   $("#expand").on("click", function(){
                      var treeview = $("#treeview").data("kendoTreeView");
                       treeview.expand(".k-item");
                    })
                  $("#collapse").on("click", function(){
                      var treeview = $("#treeview").data("kendoTreeView");
                       treeview.collapse(".k-item");
                    })
                });
            </script>

            <style>
                #treeview .k-sprite {
                    background-image: url("../content/web/treeview/coloricons-sprite.png");
                }

                .rootfolder { background-position: 0 0; }
                .folder { background-position: 0 -16px; }
                .pdf { background-position: 0 -32px; }
                .html { background-position: 0 -48px; }
                .image { background-position: 0 -64px; }
            </style>
        </div>


</body>
</html>

Hi Himawan, Thank you so much fo ryour honest response, it was so clear, this is exactly what I was looking. — BSSwathi, Oct 11 '18 at 02:18
This code expands only 1 level down , If the tree view hierachy is more , then it will not expand , to expand we need to click every time, could you please let me know on single click , How can i expand complete tree including all the childs node — BSSwathi, Oct 22 '18 at 23:08

How to perform 'Expand' and 'Collapse' in Kendo Tree View on click of Expand button and Collapse button

1 Answers1