Update a DataGrid's UI Dynamically

[Jeremy]

Hi,

I have been using the DataGrid control with Mode="@EditMode.Dialog", and writing my own custom template inside the <Template> </Template> section.

I was expecting that this Dialog would behave like other Blazor forms in that the UI can be updated / changed whilst the dialog was open.

I have written a short sample to demonstrate, What I am expecting is that when I press the Expand / Collapse button in the dialog, the div in the Template section will expand and collapse, but it doesnt. 

If I use this same code outside of the template section, it works as expected.

I have attached a sample razor page which I hope demonstrates the issue better

Thanks,

Jeremy

Attachment: DialogTest_1f702039.zip

[Vignesh Natarajan]

Hi Jeremy,  

 

Thanks for contacting Syncfusion support.  

 

Query: “What I am expecting is that when I press the Expand / Collapse button in the dialog, the div in the Template section will expand and collapse, but it doesnt.  ” 

 

We have analyzed the reported query and we are able to reproduce the reported behavior at our end also. This is because we have prevented the rendering of Grid component, unnecessary on external action due to some performance reasons. Hence the reported issue occur while clicking the button on dialog template.  

 

We suggest you to overcome the reported issue by calling the PreventRender() method of Grid with false arguments in button click event. Refer the below code example.  

 

<SfGrid ID="GridID" @ref="Grid" class="gridcolumnsformat" 

        TValue="UserModel" DataSource="@Users" 

        Toolbar="toolbaritems"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="false" 

                      Mode="@EditMode.Dialog" 

                      NewRowPosition="NewRowPosition.Bottom"> 

        <HeaderTemplate> 

            This is the Header 

        </HeaderTemplate> 

        <Template> 

            @{ 

                @* This does not work - I would expect to work the same as the section below commented with "This Works" *@ 

                <button class="btn btn-primary" type="button" @onclick="@(()=> Clicked())"> 

                    @( DialogCollapsed ? "Expand" : "Collapse") 

                </button> 

  

                <div class="@(DialogCollapsed? "collapse": "" )"> 

                    <div class="form-group"> 

                        <label class="label">Some Controls that will be hidden when collapsed</label> 

                    </div> 

                </div> 

            } 

        </Template> 

    </GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(UserModel.Id) HeaderText="ID" IsPrimaryKey="true" Visible="false" /> 

        <GridColumn Field=@nameof(UserModel.UserCode) HeaderText="Code"></GridColumn> 

        <GridColumn Field=@nameof(UserModel.FirstName) HeaderText="First Name" /> 

        <GridColumn Field=@nameof(UserModel.LastName) HeaderText="Second Name" /> 

        <GridColumn Field=@nameof(UserModel.Email) HeaderText="Email" /> 

    </GridColumns> 

    <SfSpinner Visible="false" /> 

</SfGrid> 

  

@code { 

    public SfGrid<UserModel> Grid { get; set; } 

    public void Clicked() 

    { 

        DialogCollapsed = !DialogCollapsed; 

        Grid.PreventRender(false); 

    } 

 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan  

[Jeremy]

Hi Vignesh, thanks for the awesome support answer.

If I implement the solution below, does that mean both the the dialog AND the grid will be re-rendered?

Should I be setting Grid.PreventRender(true) at some point again in the future?

[Vignesh Natarajan]

Hi Jeremy,  

 

Thanks for the update. 

 

Query: “If I implement the solution below, does that mean both the the dialog AND the grid will be re-rendered? Should I be setting Grid.PreventRender(true) at some point again in the future?” 

 

To improve the performance of Grid component in Blazor WebAssembly, we have adapted the ShouldRender concept at our source using the PreventRender method (whose default value is true). So by default we have prevented the Grid rendering (at source level) on certain external action. Hence dialog component is not refreshed/updated.  

 

Calling the PreventRender(false) will make the Grid to refresh its UI along with Dialog component. It is not necessary to call PreventRender(true) externally after using the provided solution. 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan