We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid performance problems

I added a click-event in single cell only, but it triggered the data-bond of all rows (# 1 ~ 9) of the grid.

Is it possible to trigger the data-bond of current cell/row only? If yes, what should I do?

https://stackblitz.com/edit/angular-kpgsph?file=app.component.html,app.component.ts

PS: I have changed the triggering method of the entire table to OnPust already.




5 Replies

JC Joseph Christ Nithin Issack Syncfusion Team December 7, 2022 08:26 PM UTC

Hi Andy,


  Greetings from Syncfusion support.


  Before proceeding with the solution, please explain why are you calling the show method from the template. Explain the exact use case for calling this method.


Regards,

Joseph I.



TE techlandandyzhang December 8, 2022 01:37 AM UTC


The “Show” method I added is only for describing the case that Grid Column will trigger the data-bond.

As a matter of fact, there are buttons per item in the grid for users to increase qty., if the data scale is large, it becomes very slow sometimes when click them.

Moreover, the CPU using reached 100% once clicked the button in iOS environment.





JC Joseph Christ Nithin Issack Syncfusion Team December 12, 2022 08:37 PM UTC

Andy,


Share the below details so that we will be able to provide a better solution.


  • Complete grid rendering code.
  • Simple sample to replicate the issue.
  • Steps to reproduce the issue.
  • Video demo to replicate the issue .
  • Syncfusion package version you are using.


TE techlandandyzhang December 13, 2022 02:03 AM UTC

I really want to know: When trigger the click event in the cell of grid, is there any way can avoid triggering of the grid data-bond?

As shown in my first demo case, whether it can trigger the Show method one time or not.

If it cannot be fulfilled, we may consider other solutions.



PS Pavithra Subramaniyam Syncfusion Team December 29, 2022 12:38 PM UTC

Andy,


If you want to call a method inside the column template only one time, we suggest adding a condition inside the template element. Please refer to the below code example, documentation, and sample link for more information.


<ng-template #template let-data>

  <div class="image">

    <img src="https://ej2.syncfusion.com/angular/demos/assets/grid/images/{{

                data.EmployeeID}}.png" alt="{{ data.EmployeeID }}"/>

    <div *ngIf="isInitial">{{ show() }}</div>

  </div>

</ng-template>

 

export class AppComponent {

  public isInitial: Boolean = true;

  .  .  .

 

  show() {

    console.log('testing.....');

    this.isInitial = false;

    return '';

  }

}

 


Documentation : https://ej2.syncfusion.com/angular/documentation/grid/columns/column-template#using-condition-template


Sample               :