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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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>

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. 

<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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon