Category / Section
Blazor Grid - How to create a Custom Grid Column component
1 min read
This article explains how to create your own Custom Grid Column component in Blazor Grid.
In Blazor Grid, you can create a Custom GridColumn by inheriting the default GridColumn component.
In the following example, we have created a ReadOnlyGridColumn component by inheriting the GridColumn component.
In this ReadOnlyGridColumn, we have set AllowEditing for that column as false to make it as ReadOnly GridColumn while editing.
Find the following code snippets for your reference.
Index.razor
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@Orders" AllowPaging="true"
Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowSorting="true">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<ReadOnlyGridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></ReadOnlyGridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code{
public List<Order> Orders { get; set; }
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),
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}
ReadOnlyGridColumn.razor
@using Syncfusion.Blazor.Grids
@inherits GridColumn
<CascadingValue Value="@this">
@ChildContent
</CascadingValue>
@code{
protected override void OnInitialized()
{
this.AllowEditing = false;
}
}
Reference
Please find the below documentation links for more information.
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html
