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.
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.
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.
Andy,
Share the below details so that we will be able to provide a better solution.
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.
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