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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141735 Jan 1,2019 03:20 AM UTC Jan 3,2019 06:22 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
John Stephen Mangam
Asked On January 1, 2019 03:20 AM UTC

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.





Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


John Stephen Mangam
Replied On 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?

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


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

;