Input column onclick won't work in grid but button & img work fine!

[Deanna Delapasse]

I'm perplexed that I can make onclick work on a button tag and an img tag, but not an input tag.  Can someone tell me why?

It works if I change it to "alert('clicked!')" but it can't find the clicked method in my ts file.

    clicked(id) {

        console.log("deleted signal for id =" + id);

    }

<ejs-grid id="Grid" [dataSource]='data' [editSettings]='editSettings' height='315px'>

<e-columns>

<e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=100>e-column>

<e-column field='Priority' headerText='Priority' width=120>

e-column>

<e-column field='CustomerID' headerText='Customer ID' width=120>e-column>

<e-column field='Freight' headerText='Freight' textAlign= 'Right' width=120 format= 'C2'>e-column>

<e-column field='ShipCountry' headerText='Ship Country' width=150>e-column>

<e-column headerText="Photo" width="90">

<ng-template #template let-data>

<div class="image">

<button (click)="clicked(data.OrderID)">{{data.OrderID}}button>

<input type="button" onclick="clicked(data.OrderID)" value={{data.OrderID}} />

div>

ng-template>

e-column>

e-columns>

ejs-grid>

[Hariharan J V]

Hi Deanna, 

Greeting from Syncfusion. 

We have validated the provided information and we suggest you to use the below way to achieve your requirement. In the below sample we bind the click event for input element and passed OrderID as argument for the clicked function. 

Please check the below code example and sample for more information. 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' height='350'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

            <e-column headerText="Photo" width="90"> 

              <ng-template #template let-data> 

               <button (click)="clicked(data.OrderID)">{{data.OrderID}}</button> 

                  // use click instead of onclick  

                <input type="button" (click)="clicked(data.OrderID)" value={{data.OrderID}} /> 

              </ng-template> 

            </e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

Sample : https://stackblitz.com/edit/angular-m3f3ew-hgrkcw?file=app.component.html 

Regards, 

Hariharan 

[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 ? 

<ejs-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)">

                        <e-columns>

                            <e-column field='id' headerText='Id #' width='35' isPrimaryKey='true' [visible]='true'>

                            </e-column>

                            <e-column field='fileNumber' headerText='File Number' editType='stringedit' [visible]='false'>

                            </e-column>

<e-column field='actionAdd' headerText='Add' width=40>

                              <ng-template #template let-data>

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

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

                                </a>&nbsp;

                              </ng-template>

                            </e-column>

                            <e-column field='actionDelete' headerText='Delete' width=40>

                              <ng-template #template let-data>

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

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

                                </a>&nbsp;

                              </ng-template>

                            </e-column>

</e-columns>

</ejs-grid>

[Balaji Sekar]

  

Hi Komal, 

We checked the attached sample code with your query and you have bound the <a> tag in the Grid column with used the click event. We tried this same at our end but, it is working properly. We have created a sample with provided code example as given below, 

Please refer the below code example and sample for more information. 

[app.component.html] 

<ejs-grid [dataSource]='data' height='350'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'> 

                <ng-template #template let-data> 

                    <a (click)="deleteLine(data)" id="id_{{data.CustomerName}}" title="Delete" 

                        rel='nofollow' href="javascript:void(0)">{{data.CustomerName}}</a> 

                </ng-template> 

            </e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

            <e-column headerText="Photo" width="90"> 

                <ng-template #template let-data> 

                    <button (click)="clicked(data.OrderID)">{{data.OrderID}}</button> 

                    <input type="button" (click)="clicked(data.OrderID)" value={{data.OrderID}} /> 

                </ng-template> 

            </e-column> 

        </e-columns> 

    </ejs-grid> 

   

Sample link: https://stackblitz.com/edit/angular-m3f3ew-j69pey 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar.