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,
maxIndex: 2
});
});As an alternative, you can use the selectedItem (for "single" selectionMode) or selectedItems (for "multiple" selectionMode) options.
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,
maxIndex: 5
selectedItem: navBarItems[3],
// ---------- or ----------
selectionMode: 'multiple',
selectedItems: [ navBarItems[3], navBarItems[4] ]
});
});See Also
Select one or more answers