DxToolbarDataMappingBase.Checked Property

Specifies whether an item is checked. Map this field to a data source field.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string Checked { get; set; }

Property Value

Type	Default	Description
String	null	The data source field.

Remarks

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.

Razor

<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();
        }
    }
}

FormatItem.cs

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; 
}

Refer to the DxToolbarDataMappingBase class description for more information and examples.