javascriptjquerykendo-uitelerikkendo-panelbar

How to have KendoPanel's all the sections expand


I just started using KendoPanel and I am wanting to expand all the segments of the panel under certain condition. I am using following code to achieve that:

var panelbar = $("#KendoPanel").kendoPanelBar();
                    var kendoPanelbar = panelbar.data().kendoPanelBar;
                    kendoPanelbar.collapse($("li", panelbar.element));

Seems like it is contracting all the segments instead of expanding them. What am I doing wrong?


Solution

  • Please try with below code snippet.

    <ul id="mypanelbar">
        <li class="k-state-active">First Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
        </li>
        <li>Second Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
        </li>
        <li>Third Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
        </li>
        <li>Fourth Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
        </li>
        <li>Fifth Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
        </li>
    </ul>
    
    <script>
        var panelBar;
        $(document).ready(function () {
            panelBar = $("#mypanelbar").kendoPanelBar().data("kendoPanelBar");
            // Expand all item
            panelBar.expand($("#mypanelbar li.k-item"));
        });
    </script>
    

    Let me know if any concern.