Binding to Data
- 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.
- ASPxDataWebControlBase.DataSource - to programmatically supply a data object.
- ASPxHierarchicalDataWebControl.DataSourceID - to define a declarative data source.
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.
BootstrapRibbon.TabDataBound – Allows you to customize the settings of an individual tab immediately after it is bound to data.
The TabDataBound event occurs immediately after an individual BootstrapRibbonTab object has been automatically created, and its properties have been initialized with values retrieved from the corresponding data fields. You can add functionality to your application within a handler of the TabDataBound event, by accessing the data bound tab via the event argument’s BootstrapRibbonTabEventArgs.Tab property, and modify its settings as required. Also, the RibbonTab.DataItem property can be used to access the tab’s corresponding data item object.
BootstrapRibbon.GroupDataBound – Allows you to customize the settings of an individual group immediately after it is bound to data.
The GroupDataBound event occurs immediately after an individual BootstrapRibbonGroup object has been automatically created, and its properties have been initialized with values retrieved from the corresponding data fields. You can add functionality to your application within a handler of the GroupDataBound event by accessing the data bound group via the event argument’s BootstrapRibbonGroupEventArgs.Group property, and modify its settings as required. Also, the RibbonGroup.DataItem property can be used to access the group’s corresponding data item object.
ASPxRibbon.ItemDataBound – Allows you to customize the settings of an individual item immediately after it is bound to data.
The ItemDataBound event occurs immediately after an individual RibbonItemBase object has been automatically created, and its properties have been initialized with values retrieved from the corresponding data fields. You can add functionality to your application within a handler of the ItemDataBound event by accessing the data bound item via the event argument’s RibbonItemEventArgs.Item property, and modify its settings as required. Also, the RibbonItemBase.DataItem property can be used to access the item’s corresponding data item object.
ASPxDataWebControlBase.DataBound – Occurs after the control data binding is complete, and allows you to customize the control.
The DataBound event is invoked to notify that the data binding logic used by the BootstrapRibbon control is complete. This event occurs after all data items of the specified data source have been processed and the corresponding ribbon tab, group, and item objects have been added. You can also implement additional logic at this time, by providing a handler to the DataBound event.
Data-Related Properties
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.
| Property | Default value | Tab object’s property |
|---|---|---|
| RibbonDataFields.AccessKeyField | AccessKey | RibbonTab.AccessKey |
| RibbonTabDataFields.ContextTabCategoryNameField | CategoryName | BootstrapRibbonTab.ContextTabCategory |
| RibbonDataFields.NameField | Name | RibbonTab.Name |
| RibbonDataFields.TextField | Text | RibbonTab.Text |
The BootstrapRibbon.GroupDataFields property provides access to the following group data-related properties.
| Property | Default value | Group object’s property |
|---|---|---|
| RibbonDataFields.AccessKeyField | AccessKey | RibbonGroup.AccessKey |
| RibbonGroupDataFields.DialogBoxLauncherAccessKeyField | DialogBoxLauncherAccessKey | RibbonGroup.DialogBoxLauncherAccessKey |
| BootstrapRibbonGroupDataFields.ImageUrlField | ImageUrl | BootstrapRibbonGroup.Image.Url |
| RibbonDataFields.NameField | Name | RibbonGroup.Name |
| RibbonDataFields.TextField | Text | RibbonGroup.Text |
The BootstrapRibbon.ItemDataFields property provides access to the following item data-related properties.
| Property | Default value | Item object’s property |
|---|---|---|
| RibbonDataFields.AccessKeyField | AccessKey | RibbonItemBase.AccessKey |
| RibbonItemDataFields.BeginGroupField | BeginGroup | RibbonItemBase.BeginGroup |
| RibbonItemDataFields.ItemTypeField | ItemType | See Item Types |
| BootstrapRibbonItemDataFields.LargeImageUrlField | LargeImageUrl | RibbonButtonItem.LargeImage.Url |
| RibbonDataFields.NameField | Name | RibbonItemBase.Name |
| RibbonItemDataFields.NavigateUrlField | NavigateUrl | RibbonButtonItem.NavigateUrl |
| RibbonItemDataFields.OptionGroupNameField | OptionGroupName | RibbonOptionButtonItem.OptionGroupName |
| RibbonItemDataFields.SizeField | Size | RibbonItemBase.Size |
| BootstrapRibbonItemDataFields.SmallImageUrlField | SmallImageUrl | RibbonButtonItem.SmallImage.Url |
| RibbonDataFields.TextField | Text | RibbonItemBase.Text |
| RibbonItemDataFields.ToolTipField | Tooltip | RibbonItemBase.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.