Skip to main content

Creating Groups and Items at Design Time

  • 2 minutes to read

In an Unbound Mode, you can use the Groups Editor dialog to manually create ASPxNavBar groups at design time.

To invoke this dialog:

  • click the ellipsis button corresponding to the Groups property in the Properties window;
  • click the Groups… link at the bottom of the Properties window;
  • click the Groups… link in the ASPxNavBar Tasks menu;
  • click the Groups… item in the control context menu.

The Groups Editor dialog allows you to add, delete and rearrange groups, access and customize group settings. The dialog is shown in the image below.

ASPxNavBar_GroupsEditor

After a group is created you can populate it with items. To invoke an Items Editor dialog, click the ellipsis button corresponding to the group’s Items property in the Groups Editor or in the Properties window.

The Groups Editor and Items Editor dialogs display the preview in which you can see a control structure being created. When the OK button is clicked, the aspx code that adds the created groups and items is generated. The code is listed below.

<dx:ASPxNavBar ID="MyASPxNavBar" runat="server">
     <Groups>
          <dx:NavBarGroup Text="Home">
          </dx:NavBarGroup>
          <dx:NavBarGroup Text="News">
               <Items>
                    <dx:NavBarItem Text="Subscriptions">
                    </dx:NavBarItem>
               </Items>
          </dx:NavBarGroup>
          <dx:NavBarGroup Text="Products">
               <Items>
                    <dx:NavBarItem Text="Downloads">
                    </dx:NavBarItem>
                    <dx:NavBarItem Text="Support">
                    </dx:NavBarItem>
                    <dx:NavBarItem Text="Order">
                    </dx:NavBarItem>
               </Items>
          </dx:NavBarGroup>
          <dx:NavBarGroup Text="Client Center">
          </dx:NavBarGroup>
     </Groups>
</dx:ASPxNavBar>

You can create groups and items directly in a aspx file, writing a similar code.

The following image shows the result.

ASPxNavBar_Unbound