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

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

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>

3 Replies

HJ Hariharan J V Syncfusion Team April 30, 2019 11:39 AM UTC

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> 



Regards, 
Hariharan 



KP Komal Pandya July 1, 2021 08:57 AM UTC

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>


BS Balaji Sekar Syncfusion Team July 2, 2021 12:13 PM UTC

  
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> 
   

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

Regards, 
Balaji Sekar. 


Loader.
Live Chat Icon For mobile
Up arrow icon