Not able to trigger the click event of grid template column

[Komal Pandya]

I am not able to trigger the click handler of column template controls. I am following the same as above. Could you please guide ?

In the following sample, addNewLine() and deleteLine() methods are not getting called.

I manully tried setting the focus on element in cellEdit() event.

onCellEdit(args: CellEditArgs) {

this.setFocus = args.columnObject.field;

if (args.columnObject.field === 'actionAdd' || args.columnObject.field === 'actionDelete') {

(args.cell.children[0] as any).focus();

console.log(args);

args.cancel = true;

}

}

Sample Grid :

#addNewLinesGrid id="addNewLinesGrid" [dataSource]='addNewLinesData'

[editSettings]='editSettings'

[selectionSettings]='selectionOptions'

[allowSorting]="false"

[allowFiltering]='false'

[allowPaging]='false'

[allowResizing]='true'

gridLines='Horizontal'

[rowHeight]="gridOptions.rowHeight"

(cellEdit)="onCellEdit($event)"

(cellSave)="onCellSave($event)">

field='id' headerText='Id #' width='35' isPrimaryKey='true' [visible]='true'>

field='fileNumber' headerText='File Number' editType='stringedit' [visible]='false'>

field='actionAdd' headerText='Add' width=40>

#template let-data>

(click)='addNewLine(data)' id="{{ 'add_' + data.id }}" title="Add" rel='nofollow' rel='nofollow' href="javascript:void(0)">

src="assets/images/add_mark_ico.PNG">

field='actionDelete' headerText='Delete' width=40>

#template let-data>

(click)="deleteLine(data)" id="{{ 'del_' + data.id }}" title="Delete" rel='nofollow' rel='nofollow' href="javascript:void(0)">

src="assets/images/red_cross.PNG">

2Jul, 2021 - This issue was faced post version upgrade from 18.4.49 to 19.1.57.

[Joseph Christ Nithin Issack]

Hi Komal Pandya, 

  

Greetings from Syncfusion support. 

  

Based on your requirement you need to trigger the click event of the template column in the Grid. 

  

We have created a sample using the provided code example, but we were not able to reproduce the reported issue. For your convenience we have provided the sample below. 

  

Sample: https://stackblitz.com/edit/angular-b7styh-puq2wx?file=app.component.ts 

  

Please refer the sample, and provide the following details so that we may provide a better solution ASAP 

 

1. Replicate the mentioned issue in the attached sample. 

 

2. Syncfusion Package version you are using. 

  

Regards, 

Joseph I.