kendo-ui - 剑道 UI 面板栏

Question

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

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

Answer 1

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

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