DxToolbar.Data Property

Specifies the data source for mappings.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[Parameter]
public IEnumerable Data { get; set; }

Property Value

Type	Description
IEnumerable

The data source.

Remarks

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

Follow the steps below to bind Toolbar to data:

Use the Data property to specify a data source. You can use different collection types:
Add the DataMappings tag to the component’s markup.
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.

Flat Data

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

Razor
FormatItem.cs

razor

<div class="card p-2">
    <DxToolbar [email protected]>
        <DataMappings>
            <DxToolbarDataMapping Text="ValueName" Key="Id" ParentKey="ParentId" />
        </DataMappings>
    </DxToolbar>
</div>

csharp

public class FormatItem { 
    public string? ValueName { get; set; } 
    public int Id { get; set; }
    public int ParentId { get; set; }

    public IEnumerable<FormatItem> ToolbarItems = new List<FormatItem>() {
        new FormatItem() { ValueName = "Font", Id = 1 },
        new FormatItem() { ValueName = "Size", Id = 2 },
        new FormatItem() { ValueName = "Align", Id = 3 },
        new FormatItem() { ValueName = "Times New Roman", Id = 4, ParentId = 1 },
        new FormatItem() { ValueName = "Tahoma", Id = 5, ParentId = 1 },
        new FormatItem() { ValueName = "Verdana", Id = 6, ParentId = 1 },
        new FormatItem() { ValueName = "8px", Id = 7, ParentId = 2 },
        new FormatItem() { ValueName = "10px", Id = 8, ParentId = 2 },
        new FormatItem() { ValueName = "12px", Id = 9, ParentId = 2 },
    };
}

Hierarchical Data

The following code snippet 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.

Razor
FormatItem.cs

razor

<div class="card p-2">
    <DxToolbar [email protected] 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();
        }
    }
}

csharp

public class FormatItem {
    public string? ValueName { get; set; }
    public List<FormatSubItem> Values { get; } = new List<FormatSubItem>();
    public bool IsChecked { get; set; }
    public void ChangeChecked() {
        IsChecked = !IsChecked;
    }
    public static IEnumerable<FormatItem> ToolbarItems = new List<FormatItem>() {
        new FormatItem() { ValueName = "Font", Values = {
                new FormatSubItem { Value = "Times New Roman" },
                new FormatSubItem { Value = "Tahoma" },
                new FormatSubItem { Value = "Verdana" }
            }
        },
        new FormatItem() { ValueName = "Size", Values = {
                new FormatSubItem { Value = "8px" },
                new FormatSubItem { Value = "10px" },
                new FormatSubItem { Value = "12px" }
            }
        },
        new FormatItem() {
            ValueName = "Align",
            IsChecked = true
        }
    };
}

public class FormatSubItem { 
    public string? Value; 
}

Run Demo: Toolbar - Data Binding

YouTube video