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.

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.

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.