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
close icon

Not able to pass column id and other column values to a JavaScript function from a column template

Hi,

From a grid column template, I am trying to send a row value of ID column to a function from an HTML anchor element.

<a onclick="someFunction('${Id}')" ....

Not able the get the id value into that function when I click on the link in the grid colum values.

So please let me know how to do it correctly.





3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team January 2, 2019 12:40 PM UTC

Hi John, 

Thanks for contacting Syncfusion support. 

We have validated your requirement, you can get the full row information from the column template by using the template helper function. Please find the code example  

Code Example: 

<script id="template" type="text/x-template"> 
    <div> 
        <a rel='nofollow' href="#" onclick="someFunction(${somefun(data)})">${EmployeeID}</a> <!-- The namedatacontains the current row data --> 
    </div> 
</script>  
<script> 
 
  function someFunction(args) {// click fn get the corresponding employeeID as input. 
    alert(args); 
  } 
 
  function somefun(args) { // args contains the full row data. 
    alert(JSON.stringify(args)); 
    . . .  
    return args.EmployeeID; 
  } 
</script> 


 



Regards, 
Thavasianand S. 



JS John Stephen Mangam replied to Thavasianand Sankaranarayanan January 2, 2019 02:06 PM UTC

Hi John, 

Thanks for contacting Syncfusion support. 

We have validated your requirement, you can get the full row information from the column template by using the template helper function. Please find the code example  

Code Example: 

<script id="template" type="text/x-template"> 
    <div> 
        <a rel='nofollow' href="#" onclick="someFunction(${somefun(data)})">${EmployeeID}</a> <!-- The namedatacontains the current row data --> 
    </div> 
</script>  
<script> 
 
  function someFunction(args) {// click fn get the corresponding employeeID as input. 
    alert(args); 
  } 
 
  function somefun(args) { // args contains the full row data. 
    alert(JSON.stringify(args)); 
    . . .  
    return args.EmployeeID; 
  } 
</script> 


 



Regards, 
Thavasianand S. 


Hi Sankaranarayanan ,

Could you please provide an example with single function?


PS Pavithra Subramaniyam Syncfusion Team January 3, 2019 06:22 AM UTC

 
Could you please provide an example with single function? 
 
Yes, we have created a sample for your requirement that can be downloaded from the below link. Please refer sample 
 
<div> 
    <ejs-grid id="Grid" allowPaging="true"> 
       <e-data-manager url="/Home/UrlDatasource/" adaptor="UrlAdaptor" crossdomain="true"></e-data-manager> 
        <e-grid-columns> 
            <e-grid-column template="#template" width="150" headerText="Template Column"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column> 
            <e-grid-column field="ShipCity" headerText="Ship City" width="150" minWidth="20" maxWidth="500"></e-grid-column> 
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
 
<script id="template" type="text/x-template"> 
    <div class="image"> 
        <a rel='nofollow' href="#" onclick="someFunction(${OrderID})">${OrderID}</a> 
    </div> 
</script> 
 
<script> 
  function someFunction(OrderID) { 
    alert(OrderID); 
  } 
</script> 
 
 
 
If you need to pass single argument, you can achieve using single function. If you need full rowdata in the onclick function you need to define the helper function to get all data object. 
 
 
<script id="template" type="text/x-template"> 
    <div class="image"> 
        <a rel='nofollow' href="#" onclick="someFunction(${somefun(data)})">${OrderID}</a> 
    </div> 
</script> 
 
<script> 
  function someFunction(args) { 
    alert(JSON.stringify(args)); 
  } 
 
  function somefun(args) { 
    console.log(JSON.stringify(args)); 
    return JSON.stringify(args)); 
  } 
</script> 
 
 
 
Please contact us for your further assistance. 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon