Passing more than one field value to button onclick function in grid column template

[Hingle McCringleberry]

Hello,

I have a button in a grid column template.  I want to pass more than one field value to the button's onclick function.  The code below works for passing one field value to the Test function, but I can't get more than one variable to work.

//GRID

<e-grid-column field="ID" template="#edit_template" headerText="ID" isPrimaryKey="true" type="number" textAlign="Center"></e-grid-column>

//COLUMN TEMPLATE

<script id="edit_template" type="text/x-template">

     <div class="image">

          <button onclick="test(${ID})" class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib ttip" title="Click me to edit this record" type="button" id="Grid_edit" tabindex="-1" style="height:22px;width: auto;padding-top:0" aria-label="Edit">

               <span class="e-btn-icon e-edit e-icons e-icon-center" style="color:white;margin-top:-5px !important"></span><span class="e-tbar-btn-text"></span>

          </button>

     </div>

</script>

//TEST FUNCTION

function test(args) {

     alert(args);

}

Thanks

[Hingle McCringleberry]

I figured this out.  I just needed to do it as follows:

<ejs-grid id="Grid" rowHeight="30" style="padding-bottom:230px;margin-top:0 !important" enableAltRow="true" gridLines="Both" height="100%" enableHover="true" showColumnChooser="true" toolbarClick="toolbarClick" toolbar="toolbaritems" pdfExportComplete="pdfExportComplete" excelExportComplete="excelExportComplete" dataBound="dataBound" allowPaging="true" allowSorting="true" allowFiltering="true" allowGrouping="true" allowTextWrap="true" allowResizing="true" allowReordering="true" allowPdfExport="true" allowExcelExport="true" contextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "Save", "Cancel","PdfExport", "ExcelExport", "FirstPage", "PrevPage","LastPage", "NextPage"})">

     <e-grid-columns>

          <e-grid-column field="ID" template="#edit_template" headerText="ID" isPrimaryKey="true" type="number" textAlign="Center"></e-grid-column>

          <e-grid-column field="TEAM_NAME" headerText="Team" filter="@(new { type="CheckBox"})" textAlign="Center"></e-grid-column>

     </e-grid-columns>

</ejs-grid>

<script id="edit_template" type="text/x-template">

     <div class="image">

          <button onclick="myFunction(${getArgs(data)})" class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib ttip" title="Click me to edit this record" type="button" id="Grid_edit" tabindex="-1" style="height:22px;width: auto;padding-top:0" aria-label="Edit">

               <span class="e-btn-icon e-edit e-icons e-icon-center" style="color:white;margin-top:-5px !important"></span><span class="e-tbar-btn-text"></span>

          </button>

     </div>

</script>

function getArgs(args) {

     return JSON.stringify(args);

}

function myFunction(args) {

     alert(args.ID+":" + args.TEAM_NAME);

}

[Manivel Sellamuthu]

Hi Joshua, 

Greetings from Syncfusion support. 

We are happy that you have found the solution by yourself. 

Please let us know, if you need further assistance. As always we will be happy to assist you. 

Regards, 

Manivel