Category / Section
Blazor Grid - Render custom controls along with default toolbar items
4 mins read
This article explains about how to render custom controls as toolbar items along with Grid default toolbar items.
In Blazor Grid, if you want to render custom components like SfButton, SfCheckBox, SfDropDownList, etc along with default toolbar items, then you can achieve your requirement by using the Template property of ToolbarItem.
In the following code example, we have rendered a div element with some text, SfCheckBox, and SfButton along with Grid default toolbar items. Find the below code snippets for your reference.
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Navigations
<SfGrid DataSource="@Orders" AllowPaging="true"
Toolbar="@(new List<object>() { "Add", "Edit", "Delete", "Cancel", "Update",
#pragma warning disable BL0005
new ToolbarItem()
{ Template = Text, Id = "text", TooltipText = "Text", Align = ItemAlign.Right,
},
new ToolbarItem()
{ Template = CheckBox, Id = "checkbox", TooltipText = "CheckBox", Align = ItemAlign.Right,
},
new ToolbarItem()
{ Template = Button, Id = "button", TooltipText = "Button", Align = ItemAlign.Right,
}
#pragma warning restore BL0005
})"
Height="315">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<Order> Orders { get; set; }
private bool isChecked = true;
private RenderFragment CheckBox =>@<SfCheckBox Label="Default" @bind-Checked="isChecked"></SfCheckBox>;
private RenderFragment Text =>@<div> Custom Text </div>;
private RenderFragment Button =>@<SfButton @onclick="onToggleClick" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="Custom Button"></SfButton>;
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
ShipCountry = (new string[] { "USA", "UK", "CHINA", "RUSSIA", "INDIA" })[new Random().Next(5)]
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
public string ShipCountry { get; set; }
}
private void onToggleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
}
}
Reference
Please refer to the following documentation link for more information on the Grid built-in and custom toolbar items topic:
https://blazor.syncfusion.com/documentation/datagrid/tool-bar/
