The page you are viewing does not exist in version 13.2. This link will take you to the Overview page.
The page you are viewing does not exist in version 13.1. This link will take you to the Overview page.
Add Global Navigation Commands to a View /
« Prev step
Next step »
Global navigation commands are the commands that are created based on the configuration options provided via the navigation option of the HtmlApplication object. When using such layouts as Navbar or SlideOut, navigation commands are displayed by a special widget added to a layout markup. This widget is marked as a 'global-navigation' command container. But there can be applications that use the layouts that do not provide such a command container for navigation commands. In this instance, you have to implement this command container in your application manually. This tutorial demonstrates one of the possible approaches to display global navigation commands. A 'navigation' view will be added to the application. In this view, the dxList widget will serve as a 'global-navigation' command container.
Use the application project template for the sample application. Replace the 'navbar' layout set used by default with the 'simple' layout set. In the 'simple' layout set, the Simple layout is used for application views. This layout does not have a 'global-navigation' command container widget. So, do the following to display the commands that are created based on the navigation option specified in the application by default.
Add a 'navigation' view to the application.
Add the dxList widget to the view. Declare this widget as a 'global-navigation' command container by adding the data-options attribute set to dxCommandContainer. Set the name configuration option of the command container component to 'global-navigation'. In this instance, the commands that will be created based on the application's navigation option value will be mapped to this widget by the application.
To display the navigation commands when navigating to the 'navigation' view, these commands must be available for the framework as ordinary view commands. But since you cannot declare them within the view's markup using the dxCommand markup component, add the commands field to the view's ViewModel and set it to the application's navigation array, which is populated by the navigation commands. This ViewModel field will be considered when creating commands for the view; the navigation commands will be displayed by the command container to which they are mapped by the 'global-navigation' command container.
Provide a custom template for dxList widget items. Since command configuration objects serve as data source items for the widget, utilize the command configuration options in the widget item template.
To build a navigation stack based on the 'navigation' view, make the views that are invoked by the navigation commands non-root by setting the root option of the commands to false.
To make the 'navigation' view a start view, set it as the default view for the application's routing format.