ASPxNavBar Class
Represents the web navigation bar control.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v23.2.dll
NuGet Package: DevExpress.Web
Declaration
Remarks
Add an ASPxNavBar control to your web application to provide it with the advanced navigation capabilities. This control allows you to display a number of Items arranged into different groups.
Create a Navigation Bar
Design Time
The ASPxNavBar control is available on the DX.23.2: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.
Drag the control onto a form and customize the control’s settings, or paste the control markup in the page’s source code.
<dx:ASPxNavBar ID="navBar" runat="server" AllowSelectItem="true" EnableAnimation="true" ClientInstanceName="ClientNavBar">
<Groups>
<dx:NavBarGroup Text="Group 1">
<Items>
<dx:NavBarItem Text="Scheduler" Image-Url="~/NavBar/Images/BO_Scheduler.png">
</dx:NavBarItem>
<dx:NavBarItem Text="Clients" Image-Url="~/NavBar/Images/BO_Organizations.png">
</dx:NavBarItem>
<dx:NavBarItem Text="Users" Image-Url="~/NavBar/Images/BO_Users.png">
</dx:NavBarItem>
</Items>
</dx:NavBarGroup>
<dx:NavBarGroup ItemImagePosition="Top" Text="Group 2">
<ItemStyle HorizontalAlign="Center" />
<Items>
<dx:NavBarItem Text="Notes" Image-Url="~/NavBar/Images/BO_Notes_Large.png">
</dx:NavBarItem>
<dx:NavBarItem Text="Reports" Image-Url="~/NavBar/Images/BO_Reports_Large.png">
</dx:NavBarItem>
</Items>
</dx:NavBarGroup>
</Groups>
</dx:ASPxNavBar>
Run Time
using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
ASPxNavBar navBar = new ASPxNavBar();
navBar.ID = "navBar";
navBar.ClientInstanceName = "ClientNavBar";
navBar.AllowSelectItem = true;
navBar.EnableAnimation = true;
NavBarGroup group1 = new NavBarGroup("Group 1");
group1.Items.AddRange(new List<NavBarItem>() {
new NavBarItem("Scheduler", "Scheduler", "~/NavBar/Images/BO_Scheduler.png"),
new NavBarItem("Clients", "Clients", "~/NavBar/Images/BO_Organizations.png"),
new NavBarItem("Users", "Users", "~/NavBar/Images/BO_Users.png")
});
navBar.Groups.Add(group1);
NavBarGroup group2 = new NavBarGroup() { Text = "Group 2", ItemImagePosition = ImagePosition.Top };
group2.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
group2.Items.AddRange(new List<NavBarItem>() {
new NavBarItem("Notes", "Notes", "~/NavBar/Images/BO_Notes_Large.png"),
new NavBarItem("Reports", "Reports", "~/NavBar/Images/BO_Reports_Large.png")
});
navBar.Groups.Add(group2);
Page.Form.Controls.Add(navBar);
}
Note
DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.
The ASPxNavBar control supports the following common features:
- Data binding that allows the control’s groups and items to be bound to hierarchal data sources.
- Programmatic access to the navbar object model to dynamically create groups, populate them with items, set properties, and so on.
- Programmatic access to the navbar client-side object model to perform specific client actions with groups and items.
- An ability to perform round-trips to the server using the AJAX-based callback technology.
- Customizable appearance through themes, user-defined images, styles, and user-defined templates.
Groups of the navbar control can be accessed by the ASPxNavBar.Groups property. Each group has its collection of items available using the NavBarGroup.Items property. The ASPxNavBar control also maintains a specific ASPxNavBar.Items collection which contains all the items from all the groups. This collection allows you to easily iterate through all navbar items or access an individual item by specifying its name or display text.
Groups of items can be expanded/collapsed either using the user interface or programmatically (see the NavBarGroup.Expanded property and the NavBarGroupCollection.ExpandAll method) in order to show/hide their contents. The visibility and the visual order of items within their groups and groups within the navbar control can be controlled by the NavBarItem.Visible and NavBarItem.VisibleIndex properties of items and the NavBarGroup.Visible and NavBarGroup.VisibleIndex properties of groups.
You can make the items or headers of groups act like hyperlinks or implement the desired custom behavior. Custom behavior of items or group headers can be implemented by handling their click events (such as the ASPxNavBar.ItemClick and ASPxNavBar.HeaderClick). To make an item or a group header serve as a link, use the item’s NavBarItem.NavigateUrl or the group’s NavBarGroup.NavigateUrl property respectively to specify the linked page. By default, a linked page is displayed in the same window or frame as the navbar control. To display the linked content in a different window or frame, use the navbar’s ASPxNavBar.Target property. The appearance style of all links within the navbar control can be defined via the ASPxNavBar.LinkStyle property. In order to control the clickable area of items, the ASPxNavBar.ItemLinkMode property can be used.
The ASPxNavBar control offers you complete customization of groups, group headers and item styles (for instance, see the ASPxNavBar.GroupContentStyle, ASPxNavBar.GroupHeaderStyle and ASPxNavBar.ItemStyle properties). Moreover, you can use the template technology to get unlimited control over the contents of items, group headers and group client regions. You can specify the corresponding templates at the level of the navbar control (see the ASPxNavBar.ItemTemplate, ASPxNavBar.GroupHeaderTemplate and ASPxNavBar.GroupContentTemplate properties), at the level of individual groups (see the NavBarGroup.ItemTemplate, NavBarGroup.HeaderTemplate and NavBarGroup.ContentTemplate) and at the level of individual items (see the NavBarItem.Template property).
A navbar control can be bound to any hierarchical data source by using its ASPxHierarchicalDataWebControl.DataSourceID or ASPxDataWebControlBase.DataSource property. Note that during data binding specific ASPxNavBar.ItemDataBound and ASPxNavBar.GroupDataBound events are generated which, for instance, allow you to dynamically map properties of the navbar’s items and groups to the required data fields from the bound data source, if needed.
Note
The ASPxNavBar control provides you with comprehensive client-side functionality implemented using JavaScript code:
- The control’s client-side equivalent is represented by the ASPxClientNavBar object.
- On the client side, the client object can be accessed directly by the name specified via the ASPxNavBar.ClientInstanceName property.
- The available client events can be accessed by using the ASPxNavBar.ClientSideEvents property.
The control’s client-side API is enabled if the ASPxNavBar.EnableClientSideAPI property is set to true, or the ASPxNavBar.ClientInstanceName property is defined, or any client event is handled.
Use the navbar’s ASPxNavBar.AutoPostBack property to control whether any end-user manipulation with the navbar’s elements requires posting back to the server side for further processing. If the necessity of such posting is not cancelled in a handler of the corresponding client-side event, round trips to the server can be performed either using standard postbacks (the whole page is refreshed) or the newly implemented AJAX-based callback technology. The ASPxNavBar.EnableCallBacks property of the navbar control can be used to specify which technology to use when posting back to the server.