Skip to main content

DxToolbarDataMappingBase Class

Contains the base API for classes that implement mappings in the DxToolbar component.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public abstract class DxToolbarDataMappingBase :
    DxNavigationDataMappingBase<IToolbarDataMappingModel>

Remarks

You can populate the Toolbar component with items from a data source.

Follow the steps below to bind Toolbar to data:

  1. Use the Data property to specify a data source. You can use different collection types:

    • Flat data (a collection of items organized as a single-level structure)
    • Hierarchical data (a collection of nested items)
  2. Add the DataMappings tag to the component’s markup.

  3. Create the DxToolbarDataMapping instance and map item properties (BeginGroup, NavigateUrl, and so on) to data source fields. Mappings are used to assign data from the source collection to the component’s data model.

    • For flat data collections, use the Key and ParentKey properties to create a hierarchy of items. If the Toolbar’s structure is linear, you can omit these properties.

    • For hierarchical data collections, the Children property is required to build the data model.

    You can create multiple DxToolbarDataMapping instances to specify different mappings for different nesting levels. Use the Level property to specify the item level for which data mappings are applied.

Flat Data

The code below binds the Toolbar to the flat collection of data items and specifies mappings for the Text, Key, and ParentKey properties.

<div class="card p-2">
    <DxToolbar Data=@FormatItem.ToolbarItems>
        <DataMappings>
            <DxToolbarDataMapping Text="ValueName" Key="Id" ParentKey="ParentId" />
        </DataMappings>
    </DxToolbar>
</div>

Bound to Flat Data Toolbar

Hierarchical Data

The code below binds the Toolbar to the collection of FormatItem objects. Each object can have child objects. The code specifies the Children, Text, and Checked mappings to adjust the Toolbar’s data model to the specified data source.

<div class="card p-2">
    <DxToolbar Data=@FormatItem.ToolbarItems ItemClick=@OnItemClicked>
        <DataMappings>
            <DxToolbarDataMapping Name="ValueName" Text="ValueName" Children="Values" Checked="IsChecked" />
            <DxToolbarDataMapping Text="Value" Level="1" />
        </DataMappings>
    </DxToolbar>
</div>

@code {
    void OnItemClicked(ToolbarItemClickEventArgs args) {
        if (args.ItemName == "Align") {
            ((FormatItem)args.Info.Data).ChangeChecked();
        }
    }
}

Bound to Hierarchical Data Toolbar

Run Demo: Toolbar - Data Binding Watch Video: Data Binding in Navigation Components

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DxSettingsComponent
DxDataMappingBase<DevExpress.Blazor.Navigation.Internal.IToolbarDataMappingModel>
DxNavigationDataMappingBase<DevExpress.Blazor.Navigation.Internal.IToolbarDataMappingModel>
DxToolbarDataMappingBase
See Also