Back to Devexpress

Binding to Data

aspnetbootstrap-120722-site-navigation-ribbon-binding-to-data.md

latest7.9 KB
Original Source

Binding to Data

  • Jul 13, 2023
  • 4 minutes to read

The Bootstrap Ribbon control (implemented by the BootstrapRibbon class) can be populated with information from a data source. The control supports binding to data sources containing hierarchical data. Any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g., XmlDataSource) may be used as a data source for the Ribbon control.

A data source can be specified by using either of the following properties.

While binding, the control automatically creates tab objects for the first-level data items, group objects for the second-level items, and item objects for the third-level items. Additionally, the control retrieves the object property values from the corresponding data item attributes. The BootstrapRibbon exposes specific data-related properties, allowing you to specify which data source fields the tab, group, and item information should be retrieved from.

You can specify the data source fields to which the tabs, groups and items properties are mapped using the BootstrapRibbon.TabDataFields, BootstrapRibbon.GroupDataFields, and BootstrapRibbon.ItemDataFields properties, respectively.

Data Binding Events

BootstrapRibbon provides specific events related to data binding that can be handled according to your application logic.

When the Bootstrap Ribbon control binds to an arbitrary data source, BootstrapRibbonTab, BootstrapRibbonGroup, and RibbonItemBase objects are created automatically for each recognized data item. Individual object characteristics (such as text, name and image path) are obtained from the data fields (item attributes) of the corresponding data items. The Ribbon exposes specific data-related properties, allowing you to specify which data source fields the tab, group, and item information should be retrieved from. The table below lists these properties and the corresponding properties of bound objects.

The BootstrapRibbon.TabDataFields property provides access to the following tab data-related properties.

PropertyDefault valueTab object’s property
RibbonDataFields.AccessKeyFieldAccessKeyRibbonTab.AccessKey
RibbonTabDataFields.ContextTabCategoryNameFieldCategoryNameRibbonTab.ContextTabCategory
RibbonDataFields.NameFieldNameRibbonTab.Name
RibbonDataFields.TextFieldTextRibbonTab.Text

The BootstrapRibbon.GroupDataFields property provides access to the following group data-related properties.

PropertyDefault valueGroup object’s property
RibbonDataFields.AccessKeyFieldAccessKeyRibbonGroup.AccessKey
RibbonGroupDataFields.DialogBoxLauncherAccessKeyFieldDialogBoxLauncherAccessKeyRibbonGroup.DialogBoxLauncherAccessKey
RibbonDataFields.NameFieldNameRibbonGroup.Name
RibbonDataFields.TextFieldTextRibbonGroup.Text

The BootstrapRibbon.ItemDataFields property provides access to the following item data-related properties.

PropertyDefault valueItem object’s property
RibbonDataFields.AccessKeyFieldAccessKeyRibbonItemBase.AccessKey
RibbonItemDataFields.BeginGroupFieldBeginGroupRibbonItemBase.BeginGroup
RibbonItemDataFields.ItemTypeFieldItemTypeSee Item Types
RibbonItemDataFields.LargeImageUrlFieldLargeImageUrlRibbonButtonItem.LargeImage.Url
RibbonDataFields.NameFieldNameRibbonItemBase.Name
RibbonItemDataFields.NavigateUrlFieldNavigateUrlRibbonButtonItem.NavigateUrl
RibbonItemDataFields.OptionGroupNameFieldOptionGroupNameRibbonOptionButtonItem.OptionGroupName
RibbonItemDataFields.SizeFieldSizeRibbonItemBase.Size
RibbonItemDataFields.SmallImageUrlFieldSmallImageUrlRibbonButtonItem.SmallImage.Url
RibbonDataFields.TextFieldTextRibbonItemBase.Text
RibbonItemDataFields.ToolTipFieldTooltipRibbonItemBase.ToolTip

Online Demo

The Ribbon - Data Binding online demo shows how you can bind the Bootstrap Ribbon control to a data source using API mentioned above.