kendo-ui - Kendo UI面板栏

我是Kendo UI PanelBar的新手。当用户单击按钮时，我想使用javacript扩展面板栏。谢谢你的帮助。

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

最佳答案

请尝试使用以下代码段。在按钮单击事件中调用以下函数。

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

让我知道是否有任何问题。

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