Expand Modes
The PanelBar supports a single and a multiple expand mode.
- If
ExpandMode
is set toSingle
, 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 toMultiple
, 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>