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?
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.