ASPxNavBar.AutoCollapse Property

Specifyies whether only one group can be expanded at a time.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v23.2.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue(false)]
public bool AutoCollapse { get; set; }

VB.NET

<DefaultValue(False)>
Public Property AutoCollapse As Boolean

Property Value

Type	Default	Description
Boolean	false	true if only one group can be expanded; false if the navbar can have multiple groups expanded simultaneously.

Remarks

End users can expand groups by clicking on the group expand button button or group header.

Set the AutoCollapse property to true to force navbar control to have only one group expanded at a time. In this instance, expanding a group collapses any other expanded group within the navbar. Note that the expanded group cannot be collapsed either by the user interface or programmatically. This can only be achieved by expanding another group.

Example: How to Implement the Auto Collapse Behavior that Allows Collapsing All Groups

function Expand(s, e) {
    var expanded = e.group.GetExpanded()
    s.CollapseAll();
    e.group.SetExpanded(!expanded);
    e.cancel = true;
}

<dx:ASPxNavBar ID="ASPxNavBar1" runat="server" AutoCollapse="false">
    <ClientSideEvents HeaderClick="Expand" />
    <Groups>
        <dx:NavBarGroup Text="Services" Expanded="false">
            <Items>
                <dx:NavBarItem Text="Subscriber's services" />
                <dx:NavBarItem Text="Basic services" />
                <dx:NavBarItem Text="Communication" />
            </Items>
        </dx:NavBarGroup>
        <dx:NavBarGroup Text="Internet" Expanded="False">
            <Items>
                <dx:NavBarItem Text="Internet services" />
                <dx:NavBarItem Text="Social networks" />
                <dx:NavBarItem Text="Information" />
            </Items>
        </dx:NavBarGroup>
        <dx:NavBarGroup Text="Devices" Expanded="False">
            <Items>
                <dx:NavBarItem Text="Phones" />
                <dx:NavBarItem Text="Data cards" />
                <dx:NavBarItem Text="Tablets" />
            </Items>
        </dx:NavBarGroup>
    </Groups>
</dx:ASPxNavBar>