Refresh SfGrid - From Dialog

[Andrew Olowookere]

Hi,

Can someone please advise on how to refresh Sfgrid, I currently have a Sfdialog, that i pass a Sfgrid row primary key to, and it loads the row data to the sfdialog with the ID and then polulates a textbox on it, My save is done with Onsumbit, so it saves but my grid does not refresh, unless I reload the whole page. I have added my code below.

Thanks in advance.

<SfGrid @ref="DefaultGrid" DataSource="@GridData" AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowTextWrap="true"

        AllowReordering="true" AllowExcelExport="true" AllowPdfExport="false" GridLines="Syncfusion.Blazor.Grids.GridLine.Vertical" RowHeight="70" Toolbar="Toolbaritems">

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Model" />

    <GridFilterSettings Mode="FilterBarMode.Immediate" />

  <GridFilterSettings Mode="FilterBarMode.Immediate" ImmediateModeDelay="300" />

    <GridPageSettings PageSize="10" />

    <GridColumns>

<GridColumn Field=@nameof(Model.name) FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })" Width="90px" TextAlign="TextAlign.Left">      

            <Template>

                @{               var data = (context as Model);       

<a rel='nofollow' href="" @onclick="@(e => NameEditBtn(data.ID))" @onclick:preventDefault>

@data.name

</a>

                }

            </Template>

        </GridColumn>

   </GridColumns>

</SfGrid>

<SfDialog ID="Name-dialog" ShowCloseIcon="true" @bind-Visible="@NameDialogVisible" Target="#target" Width="330px">

    <DialogTemplates>        

<Header>

            name

        </Header>

        <Content>

            <EditForm Model="Model" OnSubmit="this.SubmitValidateName">

                <DataAnnotationsValidator />

                <div class="form-group">

                    <SfTextBox FloatLabelType="FloatLabelType.Auto" Placeholder="Name" @bind-Value="Model.Name" /><br />                    <ValidationMessage For="@(() => Model.Name)"></ValidationMessage>

                </div>

                <button type="submit" class="btn btn-primary">Save</button>

            </EditForm>

        </Content>

   </DialogTemplates>

</SfDialog>

<Code>

  private Syncfusion.Blazor.Grids.SfGrid<Model> FutureGrid;

 private Model Model = new();

private bool NameDialogVisible { get; set; } = false;

 private void NameEditBtn(int ID)

        {

           Model = Data.Model.GetDataRow(ID);

            NameDialogVisible = true;

        }

   private void SubmitValidateName()

        {

           //Insert to database

           Data.Model.InsertUpdate(Model);

            NameDialogVisible = false;

            StateHasChanged();

            FutureGrid.Refresh();

            // PageRefresh();

        }

</Code>

[Renjith Singh Rajendran]

Hi Andrew, 

 

Greetings from Syncfusion support. 

 

We have analyzed your shared codes and we could see that you have not used Grid’s inbuilt editing feature. You are externally updating your database inside the SubmitValidateName method. At these cases, we suggest you to again fetch the data from your db and re-bind the Grid’s DataSource property value(GridData) dynamically with the updated data from db, after updating the edited/added changes to db inside SubmitValidateName method. 

Reference : https://blazor.syncfusion.com/documentation/datagrid/how-to/change-datasource-dynamically 

 

 

private void SubmitValidateName() 

{ 

     //Insert to database 

     Data.Model.InsertUpdate(Model); 

      NameDialogVisible = false; 

      GridData = ... ; //re-fetch the data from your source and re-bind the data to GridData 

      StateHasChanged(); 

      FutureGrid.Refresh(); 

 

      // PageRefresh();  

} 

 

 

Please try the above suggestion from your side and get back to us if you need further assistance. 

 

Regards, 

Renjith R