Blazor Toolbar — Data Binding (v22.2)
source link: https://community.devexpress.com/blogs/aspnet/archive/2023/02/01/Blazor-Toolbar-Data-Binding-_2800_v22.2_2900_.aspx
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Blazor Toolbar - Data binding
How likely are you to use data binding with our Blazor Toolbar component?
Highly likely
Not likely
Other (describe)
Free DevExpress Products – Get Your Copy Today
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK