Articles in this section
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

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CloseEdit

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied