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

Thread ID:	Created:	Updated:	Platform:	Replies:
144269	Apr 27,2019 07:29 PM UTC	Apr 30,2019 11:39 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: Grid

Deanna Delapasse

Asked On April 27, 2019 07:35 PM UTC

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>

Reply | Reply with quote

Hariharan J V [Syncfusion]

Replied On 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.

<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

</ng-template>

</e-column>

</e-columns>

</ejs-grid>

</div>

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

Regards,

Hariharan

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US