Define Grid events programmatically in Blazor DataGrid

29 May 20263 minutes to read

In the Blazor DataGrid, events are typically defined using the GridEvents child Razor component. As an alternative, Grid events can also be configured programmatically by accessing the Grid instance through a component reference. This approach is useful when events need to be assigned dynamically during the application lifecycle.

Note: Assigning Grid.GridEvents programmatically replaces any events declared via the <GridEvents> markup for that Grid instance.

To define events programmatically:

• Set a reference to the Grid using the @ref directive.
• After the Grid is rendered, assign the GridEvents property within the OnAfterRenderAsync lifecycle method (guarded by firstRender).
• Use the EventCallbackFactory to create event handlers bound to the component context.

Index.razor

@using Syncfusion.Blazor.Grids
@inject IJSRuntime JS

<SfGrid @ref="Grid" DataSource="@Orders">
</SfGrid>

@code{
    SfGrid<Order> Grid { get; set; }
    public List<Order> Orders { get; set; }

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && Grid != null)
        {
            Grid.GridEvents = new GridEvents<Order>()
            {
                DataBound = new EventCallbackFactory().Create<object>(this, DataBoundHandler)
            };
        }
        return base.OnAfterRenderAsync(firstRender);
    }

    public async Task DataBoundHandler()
    {
        await JS.InvokeVoidAsync("alert", "Grid data loaded successfully.");
    }

    protected override void OnInitialized()
    {
        Orders = new List<Order>()
        {
            new Order() { OrderID = 1001, EmployeeID = 1, OrderDate = DateTime.Now.AddDays(-1), ShipCountry = "Sweden" },
            new Order() { OrderID = 1002, EmployeeID = 2, OrderDate = DateTime.Now.AddDays(-2), ShipCountry = "Germany" },
            new Order() { OrderID = 1003, EmployeeID = 3, OrderDate = DateTime.Now.AddDays(-3), ShipCountry = "Argentina" },
            new Order() { OrderID = 1004, EmployeeID = 4, OrderDate = DateTime.Now.AddDays(-4), ShipCountry = "Mexico" },
            new Order() { OrderID = 1005, EmployeeID = 5, OrderDate = DateTime.Now.AddDays(-5), ShipCountry = "Denmark" },
            new Order() { OrderID = 1006, EmployeeID = 6, OrderDate = DateTime.Now.AddDays(-6), ShipCountry = "Finland" },
            new Order() { OrderID = 1007, EmployeeID = 7, OrderDate = DateTime.Now.AddDays(-7), ShipCountry = "Switzerland" },
            new Order() { OrderID = 1008, EmployeeID = 8, OrderDate = DateTime.Now.AddDays(-8), ShipCountry = "UK" },
            new Order() { OrderID = 1009, EmployeeID = 9, OrderDate = DateTime.Now.AddDays(-9), ShipCountry = "Sweden" }
        };
    }

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