Data Binding Using Mapping Properties
- 2 minutes to read
When the NavBar binds to an arbitrary data source, MVCxNavBarGroup and MVCxNavBarItem objects are created automatically for every recognized first and second level data item respectively. Individual group and item characteristics (such as text, name, image path, navigation location, and tooltip text) are obtained from the data fields (item attributes) of corresponding data items. NavBar exposes its specific data-related properties, allowing you to specify which data source fields the group/item information should be retrieved from. The tables below list these properties and the corresponding properties of MVCxNavBarGroup and MVCxNavBarItem objects.
Groups data-related properties
| NavBar data-related properties | Corresponding group object properties |
|---|---|
| NavBarGroupDataFields.HeaderImageUrlField (via MVCxNavBar.GroupDataFields.HeaderImageUrlField) | ImagePropertiesBase.Url (via MVCxNavBarGroup.HeaderImage.Url) |
| NavBarGroupDataFields.NameField (via MVCxNavBar.GroupDataFields.NameField) | NavBarGroup.Name (via MVCxNavBarGroup.Name) |
| NavBarGroupDataFields.NavigateUrlField (via MVCxNavBar.GroupDataFields.NavigateUrlField) | NavBarGroup.NavigateUrl (via MVCxNavBarGroup.NavigateUrl) |
| NavBarGroupDataFields.TextField (via MVCxNavBar.GroupDataFields.TextField) | NavBarGroup.Text (via MVCxNavBarGroup.Text) |
| NavBarGroupDataFields.ToolTipField (via MVCxNavBar.GroupDataFields.ToolTipField) | NavBarGroup.ToolTip (via MVCxNavBarGroup.ToolTip) |
Items data-related properties
| NavBar data-related properties | Corresponding item object properties |
|---|---|
| NavBarItemDataFields.ImageUrlField (via MVCxNavBar.ItemDataFields.ImageUrlField) | ImagePropertiesBase.Url (via MVCxNavBarItem.Image.Url) |
| NavBarItemDataFields.NameField (via MVCxNavBar.ItemDataFields.NameField) | NavBarItem.Name (via MVCxNavBarItem.Name) |
| NavBarItemDataFields.NavigateUrlField (via MVCxNavBar.ItemDataFields.NavigateUrlField) | NavBarItem.NavigateUrl (via MVCxNavBarItem.NavigateUrl) |
| NavBarItemDataFields.TextField (via MVCxNavBar.ItemDataFields.TextField) | NavBarItem.Text (via MVCxNavBarItem.Text) |
| NavBarItemDataFields.ToolTipField (via MVCxNavBar.ItemDataFields.ToolTipField) | NavBarItem.ToolTip (via MVCxNavBarItem.ToolTip) |
Example
@Html.DevExpress().NavBar(
settings => {
settings.Name = "MyNavBar";
settings.AutoCollapse = true;
settings.GroupDataFields.TextField = "GroupTitle";
settings.GroupDataFields.HeaderImageUrlField = "GroupImage";
settings.GroupDataFields.NavigateUrlField = "GroupUrl";
settings.ItemDataFields.TextField = "ItemTitle";
settings.ItemDataFields.ImageUrlField = "ItemImage";
settings.ItemDataFields.NavigateUrlField = "ItemUrl";
}).BindToXML(HttpContext.Current.Server.MapPath("~/App_Data/Site.xml"), "mainmenu/group").GetHtml()
The picture below demonstrates the data retrieval path during the binding to an XML file.
