Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Show All Themes

Client-Side Functionality

  • Platform
  • SQL Server
  • Browser
  • Language
Group settings
Item settings

This example demonstrates how to manipulate a navbar control programmatically on the client using our extended client-side functionality. The client-side programmatic interface is available if the EnableClientSideAPI property is set to true or if there is a handler assigned to any client-side event.

In this demo, each group or item of the navbar control is identified using its Name property. In order to obtain a specific navbar group or item by its name on the client, the GetGroupByName or GetItemByName method is used respectively. In this demo, the navbar's AutoCollapse mode is enabled which specifies that only one group can be expanded within the navbar at any point in time. In this mode, the SetActiveGroup method can be used to expand the desired group. (See JS code, the ChangeActiveGroup function)

A specific navbar item can be selected within each group via the SetSelectedItem method by passing it the required item. (See JS code, the ChangeSelectedItem function)

The GroupExpandedChanged function that is a handler of the navbar's ExpandedChanged event (see ASPX and JS code) demonstrates how to synchronize values of the dropdown editors with the expanded group and the group's selected item, if any.

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
Open VB Solution
The source code files for this demo are installed (by default) in the following directories:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\ASPxNavigationAndLayoutDemos
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\VB\ASPxNavigationAndLayoutDemos