Category / Section
How to refresh a particular row without refreshing whole data in Blazor DataGrid?
2 mins read
This article explains how to refresh a particular row without refreshing the whole Grid datasource.
In Blazor Grid, if you want to refresh a particular row without refreshing the whole Grid DataSource, then you can achieve your requirement by using the SetRowData method of the Grid.
In the following code example, we have prevented the default save operation while editing and updated the particular row using the SetRowData method in the OnActionBegin event of the Grid. Find the below code snippets for your reference.
@using Syncfusion.Blazor.Grids <SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order"></GridEvents> <GridColumns> <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" 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" Width="120"></GridColumn> </GridColumns> </SfGrid> @code{ SfGrid<Order> Grid; 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; } } public async Task ActionBeginHandler(ActionEventArgs<Order> args) { if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save && args.Action == "Edit") { args.Cancel = true; await Grid.CloseEdit(); await Grid.SetRowData(args.Data.OrderID, args.Data); } } }
Reference
Please refer to the following documentation link for your reference:
https://blazor.syncfusion.com/documentation/datagrid/events/#onactionbegin