Kendo UI Panel Panel

Question

I am new to Kendo UI PanelBar. I would like to expand the panel bar using javacript when the user clicks a button. Thank you for your help.

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

Answer 1

Try using the code snippet below. Call below funciton in the 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 there is any problem.

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');
    }
}