New to Telerik UI for ASP.NET Core? Download free 30-day trial

Expand Modes

The PanelBar supports a single and a multiple expand mode.

  • If ExpandMode is set to Single, the user can expand only a single root item or a single child item of a specific parent item. Expanding another root item or another child of the parent of the currently expanded item will collapse the currently expanded item. This approach is also the only way to collapse an expanded item in the single expand mode.
  • If ExpandMode is set to Multiple, the user can expand multiple root items or children of the same parent item at a time. Expanding an item does not collapse the currently expanded items. Expanded items can be collapsed by clicking on them.
    @(Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Single)
        .Items(items =>
        {
            items.Add().Text("Root1")
                .Items(subitems =>
                {
                    subitems.Add().Text("Level2 1");
                    subitems.Add().Text("Level2 2");
                });
            items.Add().Text("Root2")
                .Items(subitems =>
                {
                    subitems.Add().Text("Level2 1");
                    subitems.Add().Text("Level2 2");
                });
        })
    )
<kendo-panelbar name="panelbar" expand-mode="single">
    <items>
        <panelbar-item text="Root1">
            <items>
                <panelbar-item text="Level2 1"></panelbar-item>
                <panelbar-item text="Level2 1"></panelbar-item>
            </items>
        </panelbar-item>
        <panelbar-item text="Root2">
            <items>
                <panelbar-item text="Level2 1"></panelbar-item>
                <panelbar-item text="Level2 2"></panelbar-item>
            </items>
        </panelbar-item>
    </items>
</kendo-panelbar>

See Also

In this article