sfGrid not refreshing to show new row

[Uday]

In sfGrid, I added a new row. I have mentioned the primary key & identity. The table gets updated but the grid shows the primary key column as 0. This means the Grid does not refresh data from the table.Any workaround?

    @code {        

        List<Brand> brands = new List<Brand>();

        SfGrid<Brand> Grid;

        // private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel" };

        // , new ItemModel() { Text = "Click", TooltipText = "Click", PrefixIcon = "e-click", Id = "Click" } };

        string strError = string.Empty;

        private IT.Models.Brand brand;

        protected override async Task OnInitializedAsync()

        {

            await LoadData();

        }

        public void ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)

        {

            if (args.Item.Id == "Grid_excelexport")

            {

                this.Grid.ExcelExport();

            }

        }

        private async Task LoadData()

        {

            brands = await Http.GetFromJsonAsync<List<Brand>>($"api/brands");

        }

        private void OnBeginHandler(ActionEventArgs<Brand> Args)

        {

            if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save)

            {

                strError = Args.Action;

                if (Args.Action == "Add")

                {

                    brand = Args.Data;

                    Http.PostAsJsonAsync<Brand>($"api/brands", brand);

                    Grid.Refresh();                    

                }

                else

                {

                    int id = Args.Data.brandID;

                    brand = Args.Data; ;

                    try

                    {

                        Http.PutAsJsonAsync<Brand>($"api/brands/{id}", brand);

                    }

                    catch(Exception ex)

                    {

                        strError = ex.Message;

                    }

                }

            }

        }

    }

[Vignesh Natarajan]

Hi Uday,  

 

Thanks for contacting Syncfusion support.  

 

Query: “This means the Grid does not refresh data from the table.Any workaround?” 

 

We have analyzed your query and we understand that you are facing issue after inserting a record into Grid. We suggest you to overcome the reported issue by fetching the updated list from your service in the OnActionComplete event of the Grid.  

 

OnActionComplete event will be triggered when certain action gets completed. We suggest you to fetch the updated list from your service and bound it to Grid datasource property when RequestType is Save in OnActionComplete event. Refer the below code example.  

 

<SfGrid @ref="_teacherGrid" DataSource="@brands" SelectedRowIndex=0 Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowSorting="true" AllowExcelExport="true" AllowPdfExport="true" AllowPaging="true"> 

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Normal" ShowConfirmDialog="true" ShowDeleteConfirmDialog="true"></GridEditSettings> 

    <GridEvents OnActionBegin="ActionBeginHandler" OnActionComplete="ActionCompleteHandler" RowSelected="RowSelecthandler" TValue="Orders"></GridEvents> 

    <GridColumns> 

        <GridColumn Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" IsIdentity="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field="CustomerID" HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field="EmployeeID" HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

        SfGrid<Orders> _teacherGrid { get; set; } 

    public static IEnumerable<Orders> TeachersData { get; set; } 

    protected override async Task OnInitializedAsync() 

    { 

        await LoadData(); 

    }  

    private async Task LoadData() 

    { 

        brands = await Http.GetFromJsonAsync<List<Brand>>($"api/brands"); 

    }  

    public async Task ActionCompleteHandler(ActionEventArgs<Orders> arg) 

    { 

        if (arg.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Save)) 

        { 

            await LoadData(); // fetch and bind updated data to Grid here 

        } 

    } 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/events/#onactioncomplete  

https://blazor.syncfusion.com/documentation/datagrid/editing/#event-trace-while-editing  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan