1. Home
  2. Forum
  3. Blazor
  4. Why grid control is re rendered when click on button

Why grid control is re rendered when click on button

I have an sfgrid control.I have loaded data source from api in "OninitializeAsync".It works fine on initial load.I would like to know why grid control is "rerendered" when I click on button.


Note:-

There is no action on button click, I have just click on button but why grid control is rerendered.

I would like to prevent rerendered of grid control when I click on button.


26 Replies
RS Renjith Singh Rajendran Syncfusion Team March 7, 2022 04:02 PM UTC

Hi KINS, 
 
Greetings from Syncfusion support. 
 
Query : There is no action on button click, I have just click on button but why grid control is rerendered. 
We checked this by rendering a button and Grid in a single page. But we could not face the reported scenario when clicking on the button. We are attaching a sample which we have tried for your reference, please download and refer the sample from the link below, 
 
Kindly refer the above attached sample and if you are still facing difficulties then the following details would be helpful for us to proceed further. 
 
  1. Share a detailed explanation of the exact scenario you are facing this problem.
  2. Share a video demo showing the replication of the problem you are facing.
  3. Share a simple issue reproducing sample based on your scenario for us to validate.
  4. Share the Syncfusion version details.
 
The provided information will help us analyze the problem, and provide you a solution as early as possible. 
 
Regards, 
Renjith R 
 


KI KINS March 8, 2022 03:04 PM UTC

Thanks for reply..

I am facing this issues in Blazor Web Assembly.Please help how to resolve this issue...


KI KINS March 8, 2022 05:48 PM UTC

please check attached example code for web assembly code which I modified....


Attachment: WebApplication5_f9018144.rar

KI KINS March 8, 2022 10:07 PM UTC

Awaiting for reply...


RS Renjith Singh Rajendran Syncfusion Team March 9, 2022 10:36 AM UTC

Hi KINS, 
 
We could see that you are updating the count variable value inside the button click handler. This will trigger state change and will re-render the components available in the page. So, based on this scenario, we suggest you to use the Grid’s PreventRender method. Please refer the below codes and check this from your side. 
 
 
    SfGrid<Order> Grid; 
    ... 
   public void ButtonClick() 
    { 
        Grid.PreventRender(); 
        count++; 
    } 

 
We are also attaching the modified sample for your reference, 
 
And also we could see that you are displaying large data in Grid. At these cases to improve performance, we suggest you to render less rows in grid by enabling Paging/Virtualization features. We have already documented this topic in our documentation section for improving performance. Please refer the below documentation for more details, 
 
Regards, 
Renjith R 


KI KINS March 10, 2022 06:31 AM UTC

Thanks for reply....

Noted the above points...

Please clarify my below points

1.I have 10 combobox and one grid control and one button control

When I click on button,wheather we need to use above code for all control to prevent render ???

Or Is there any alternative solution to prevent render ???

2.If I use cascading filter combobox, wheather we need to use above code to prevent render ???

3.If I use enter key for tab index using js code,then we need to apply same code as above ???

4.If I just select the value from combobox, then we need to apply the same code ??

5.Is above code required for blazor server ???


KI KINS March 11, 2022 02:28 PM UTC

awaiting for reply ???


PM Ponmani Murugaiyan Syncfusion Team March 13, 2022 12:09 PM UTC

Hi KINS, 

Currently we are preparing sample for your requirement. We will update further details in 2 business days (March 15, 2022).  

Regards, 
Ponmani M 


KI KINS March 15, 2022 10:09 AM UTC

Hope we will get reply today ....


KI KINS March 15, 2022 09:34 PM UTC

Please help..

Still awaiting for prompt reply 


PM Ponmani Murugaiyan Syncfusion Team March 16, 2022 02:42 AM UTC

Hi KINS, 

Sorry for the delay. We suggest you to override the ShouldRender lifecycle method  to suppress UI rendering, which avoid further rendering operations on the component, after the first render. If the implementation returns true, the UI is refreshed. Initial rendering cannot be prevented using this method. 



private void ButtonClick() 
    { 
        shouldRender = false; 
        currentCount++; 
    } 
 
    protected override bool ShouldRender() 
    { 
        return shouldRender; 
    } 

Regards, 
Ponmani M 


KI KINS March 16, 2022 08:14 AM UTC

Thanks for reply...

I have an clarification on cascading filter combobox.


If I set ShouldRender = false on "Combobox Change Event", whether this cascading filter will work ??



PM Ponmani Murugaiyan Syncfusion Team March 17, 2022 05:21 PM UTC

Hi KINS, 

Query: If I set ShouldRender = false on "Combobox Change Event", whether this cascading filter will work ?? 

Yes, the cascading filter will work, if we set the shouldRender life cycle methods. Please get back us if you need further assistance. 

Regards, 
Ponmani M  


KI KINS March 17, 2022 10:28 PM UTC

Thanks for clarification..

ShouldRender is not solved my problem..

Actually I have two component

1.List Page (contains one Addnew button and grid control)

2.Entry Page (which contains four combobox and two button control "save" and " Back" button).


As per above reply,"Grid.PreventRender" is working fine when I click Addnew button in list page


I would like to know how to use prevent render method for all components when I click save and back button click.


Note:-

I have set "ShouldRender = false" in save and back button click event but its not working (Its not going back to List Page)


I would like to goback to list page when I click on save and back button click without re rendering all component.


Hope its clear...





PM Ponmani Murugaiyan Syncfusion Team March 18, 2022 03:48 PM UTC

Hi KINS, 

Thanks for the detailed information. 

Currently we are investigating further on this query, we will update further details in 2 business days (March 22, 2022). 

Regards, 
Ponmani M 


KI KINS March 22, 2022 12:51 PM UTC

awaiting for reply...


PM Ponmani Murugaiyan Syncfusion Team March 23, 2022 01:35 PM UTC

Hi KINS, 

Sorry for the delay. 

We suggest you to use the shouldRender life cycle method in the custom component to prevent re-rending of the ComboBox component. We have prepared sample with custom component for your reference.  


@using Syncfusion.Blazor.DropDowns; 
@typeparam TVal; 
@typeparam TItemss; 
 
<SfComboBox TValue="TVal" TItem="TItemss" DataSource="@customData"> 
    <ComboBoxFieldSettings Text="Text" Value="Text"></ComboBoxFieldSettings> 
</SfComboBox> 
 
<button class="btn btn-primary" @onclick="ButtonClick">Click me</button> 
<p>Count: @currentCount</p> 
 
@code { 
    private int currentCount = 0; 
    private bool _shouldRender = false; 
    private void ButtonClick() 
    { 
        _shouldRender = false; 
        currentCount++; 
    } 
    protected override bool ShouldRender() 
    { 
        return _shouldRender; 
    } 
 
    [Parameter] 
    public List<TItemss> customData { get; set; } 
 
    [Parameter] 
    public EventCallback<TVal> DDLValueChanged { get; set; } 
} 

Kindly check with the above attached sample, if issue still exists in your requirement with custom component, please share the issue reproducing sample to investigate further in our end. 

Regards, 
Ponmani M 


KI KINS March 23, 2022 06:14 PM UTC

Thanks for reply....

but above example is still not solved my problem..

please check attached example code and advise how to solve this issues.


Explanation:-


I have two combobox and two button control in my razor page.


When I click on First button,it should show first combobox without re-render of second combobox

When I click on second button,it should show second combobox without re-render of first combobox


Hop this example is clear




Attachment: BlazorApp1_ec9c54e4.zip


KI KINS March 24, 2022 03:50 PM UTC

Is it possible to get reply today ??

please help...



PM Ponmani Murugaiyan Syncfusion Team March 28, 2022 03:23 AM UTC

Hi KINS, 

Sorry for the delay. 

We able to replicate the reported issue, based on your shared sample. Currently we don’t have specific method to prevent the ComboBox component in our end. So, we are achieving using the ShouldRender life cycle method. We are facing complexity in providing solution for this requirement, we are investigating on this sample and provide details in 2 business days (March 30, 2022) without further delay.  

Regards. 
Ponmani M 


KI KINS March 30, 2022 05:20 AM UTC

Hope will get reply today...


awaiting for soonest reply...



PM Ponmani Murugaiyan Syncfusion Team March 31, 2022 03:42 PM UTC

Hi KINS,


Query: When I click on First button, it should show first combobox without re-render of second combobox. When I click on second button, it should show second combobox without re-render of first combobox


Based on your reported requirement, we suspect that on every button need to show without re-rendering of the another component. By default, re-rendering will remove the selected values maintained from the component. So, we suggest you to enable the EnablePersistance property to maintain the previously selected value of the component so in order to avoid the rendering causes like removing the value from input.


Please make a try with the below suggestion in your application and update whether meets your requirement.


@if (Mode == "First")

{

    <SfComboBox ID="ComboBox1" EnablePersistence="true" TValue="string" TItem="GameFields" Placeholder="First Combobox" DataSource="@Games">

        <ComboBoxEvents TValue="string" TItem="GameFields" ValueChange="CHangeHandler"></ComboBoxEvents>

        <ComboBoxFieldSettings Value="ID" Text="Text" />

    </SfComboBox>

}

 

@if (Mode == "Second")

{

    <SfComboBox ID="ComboBox2" EnablePersistence="true" TValue="string" TItem="GameFields" Placeholder="Second Combobox" DataSource="@Games">

        <ComboBoxEvents TValue="string" TItem="GameFields" ValueChange="CHangeHandler"></ComboBoxEvents>

        <ComboBoxFieldSettings Value="ID" Text="Text" />

    </SfComboBox>

}


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp160992888


Regards,

Ponmani M


KI KINS April 1, 2022 04:13 AM UTC

In that case,how "ShouldRender" life cycle will work..


that means, no need to change the should render variable (true/false) ???




PM Ponmani Murugaiyan Syncfusion Team April 1, 2022 07:50 AM UTC

Hi KINS,


Query: that means, no need to change the should render variable (true/false) ???


Yes, you do not need to use the ShouldRender life cycle method instead, you can use the EnablePersistance property to meet your requirement.


Regards,

Ponmani M


KI KINS April 1, 2022 12:32 PM UTC

Can I use " EnablePersistence" in Grid to avoid Re-rendering instead of "grid.PreventRender" method ??



PM Ponmani Murugaiyan Syncfusion Team April 4, 2022 01:03 PM UTC

Hi KINS,


By default, in Grid component we have the method “to prevent the unwanted re-rendering of the component”. So that we suggested to use the PreventRender method in Grid component.

https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders


Enabling persistence won’t prevent rendering of grid, it will just maintains the previous grid’s state on component re-rendering. So if EnablePersistence meets your requirement, we suggest you to use this property in Grid component.

https://blazor.syncfusion.com/documentation/datagrid/state-management


But, whereas in ComboBox component, we don’t have specific support, so we suggest you to use the EnablePersistance property to meet your requirement.


Regards,

Ponmani M


Loader.
Up arrow icon