Define the GridEvents Programmatically in DataGrid

16 Aug 20232 minutes to read

GridEvents will be defined as child razor component to Grid component. Instead, you can define the GridEvents programmatically using the Grid reference.

In the following demo, the OnActionBegin event is defined programmatically to prevent the edit action for certain records.

@using Syncfusion.Blazor.Grids

<SfGrid @ref="Grid" DataSource="@Orders" Toolbar=@ToolbarItems>
    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></GridEditSettings>
</SfGrid> 
 
@code{
    SfGrid<Order> Grid { get; set; } 
    public List<Order> Orders { get; set; }
    public string[] ToolbarItems = new string[] { "Add", "Edit", "Delete", "Update", "Cancel" };

    protected override Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (Grid != null) 
        { 
            Grid.GridEvents = new GridEvents<Order>() { OnActionBegin = new EventCallbackFactory().Create<ActionEventArgs<Order>>(this.Grid, ActionBeginHandler)}; 
        } 
        return base.OnAfterRenderAsync(firstRender); 
    } 
    public void ActionBeginHandler(ActionEventArgs<Order> args) 
    { 
        if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) 
        {
            if (args.RowData.ShipCountry == "Germany") {
                args.Cancel = true;
            }
        } 
    } 
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 9).Select(x => new Order()
        {
            OrderID = 1000 + x,
            EmployeeID = x,
            OrderDate = DateTime.Now.AddDays(-x),
            ShipCountry = (new string[] { "Sweden", "Germany", "Argentina", "Mexico", "Denmark", "Finland", "Switzerland", "UK" })[new Random().Next(8)],
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public int? EmployeeID { get; set; }
        public DateTime? OrderDate { get; set; }
        public string ShipCountry {  get;  set; }
    }
    }