Blazor Toolbar — Data Binding (v22.2)

As you know, toolbars are often used to implement button-based interfaces. To help address a variety of use-case scenarios, our Blazor Toolbar component now offers data binding support. In this post, I’ll summarize two different ways to build your toolbar. 

The Simple Approach

If your Toolbar layout is relatively simple, you can declare buttons directly in your markup: 

<DxToolbar> 
    <Items> 
        <DxToolbarItem Text="Drop-down button"> 
            <Items> 
                <DxToolbarItem Text="Nested button" /> 
            </Items> 
        </DxToolbarItem> 
        <DxToolbarItem Text="Regular button" /> 
    </Items> 
</DxToolbar> 

A More Advanced Approach

If your toolbar layout requires additional processing logic (for example, to display toolbar items based on user role/profile), you can bind your DevExpress Blazor Toolbar to data. This data can use either a flat or hierarchical structure.

@using Microsoft.AspNetCore.Components.Authorization 

<DxToolbar Data="@ToolbarItems"> 
    <DataMappings> 
        <DxToolbarDataMapping Key="Id" ParentKey="ParentId" Visible="isAdmin" Text="ValueName" /> 
    </DataMappings> 
</DxToolbar> 

@code { 
    [CascadingParameter] Task<AuthenticationState> authenticationStateTask { get; set; } 

    public IEnumerable<FormatItem> ToolbarItems { get; set; } 
    static bool IsAdmin { get; set; } 

    protected override async Task OnParametersSetAsync() { 
        var AuthenticationState = await authenticationStateTask; 
        IsAdmin = authenticationState.User.IsInRole("Admin"); 
    } 

    public class FormatItem { 
        public string ValueName { get; set; } 
        public int Id { get; set; } 
        public int ParentId { get; set; } 
        public bool IsAdmin = IsAdmin; 
    } 
} 

Data binding can be applied in the same manner across all DevExpress Blazor navigation components (Accordion, Context Menu, Menu, Toolbar, TreeView). If you wish to learn more about implementation details, please review the following YouTube video: https://www.youtube.com/watch?v=B_UQOO07kkw 

Your Feedback Matters

We appreciate your feedback as usual.

Free DevExpress Products - Get Your Copy Today