DevExtreme jQuery/JS - Items Selection

An end user can select NavBar items in two different modes: 'single' (by default) or 'multiple'. You can use the selectionMode option to change the mode.

JavaScript
  • $(function() {
  •     $("#navBarContainer").dxNavBar({
  •         items: navBarItems,
  •         selectionMode: "multiple"
  •     });
  • });

If you need an item to be preselected, pass its index in the data source array to the selectedIndex option.

JavaScript
  • var navBarItems = [
  •     { text: "User", icon: "user" },
  •     { text: "Find", icon: "find" },
  •     { text: "Favorites", icon: "favorites" }
  • ];
  •  
  • $(function() {
  •     $("#navBarContainer").dxNavBar({
  •         items: navBarItems,
  •         selectedIndex: 1
  •     });
  • });

As an alternative, you can use the selectedItem (for "single" selectionMode) or selectedItems (for "multiple" selectionMode) options. This approach is suitable if the NavBar items are specified using an array rather than the dxItem markup component.

JavaScript
  • var navBarItems = [
  •     { text: "User", icon: "user" },
  •     { text: "Find", icon: "find" },
  •     { text: "Favorites", icon: "favorites" },
  •     { text: "About", icon: "info" },
  •     { text: "Home", icon: "home" },
  •     { text: "URI", icon: "tips" }
  • ];
  •  
  • $(function() {
  •     $("#navBarContainer").dxNavBar({
  •         items: navBarItems,
  •         selectedItem: navBarItems[3],
  •         // ========== or ==========
  •         selectionMode: 'multiple',
  •         selectedItems: [ navBarItems[3], navBarItems[4] ]
  •     });
  • });
See Also