Kendo UI panelbar

Question

I'm new with Kendo UI PanelBar. I would like to expand the panelbar using javacript when the user click on a button. Thanks for your help.

@(Html.Kendo().PanelBar()
            .Name("TestBar")
            .Items(panelbar =>
            {
                panelbar.Add().Text("Additional Information")
                .Content(@<text>@Html.Partial("Req") </text>);
            })
        )

Answer 1

Please try with the below code snippet. Call below funciton in your button click event.

<script>
    function ExpandItemInPanelBar(){
        var panelBar = $("#TestBar").data("kendoPanelBar");
        // I have set 0 in 'eq(0)' so it will expand first item you can change it as per your code
        panelBar.select(panelBar.element.children("li").eq(0));

        var item = panelBar.select();
        panelBar.expand(item);
    }
</script>

Let me know if any concern.

Update 1:

//Check any item is expanded in panelbar
if(panelBar.element.children("li").hasClass("k-state-active") == true)
{
    alert('items(s) expanded');
}

//Check every item is expanded or not in panelbar
items =  panelBar.element.children("li");
for(var i = 0 ; i < items.Length; i++)
{
    if($(items[i].hasClass('k-state-active'))
    {
        alert('this item is expanded');
    }
}