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

AngularJS, Template and Event Problem

Hi All,

I am using a template for a  column and in that template I have a couple of buttons.  The buttons are used to edit or remove the current row but am having trouble passing the row information in to the function the button is using.

Please note I am using Angular and want to edit the current grid data by using a button in the grid.

My column template looks like this:

    <script type="text/template" id="optionsTemplate">
        <div class="pull-right">
            <a class="btn btn-xs btn-warning" ng-click="$parent.editAngularRow(id)">id</a>
            <a class="btn btn-xs btn-danger" ng-click="$parent.removeRow(id)">id</a>

I have read and followed this post about the click event and the template type to use: https://www.syncfusion.com/forums/120019/how-to-bind-clickable-data-in-grid

Using this post I have set the type="text/template" and the function editAngularRow is actually called.  The problem that I have now is that I can't work out how to pass the data to the function.  i have tried :id (like JSRender wants), tried {{id}} (like Angular wants) but nothing seems to work.

I am trying to get two-way binding working between the data in the grid and an array of objects in the controller.  The buttons are going to be used to edit that array and, hopefully, update the grid.

Any ideas on how to pass the data to the function?  Also any idea of now to access the row number in the template?  I am going to need this to find the row to update but can't find anything about it in the documentation.


3 Replies

KK Karthick Kuppusamy Syncfusion Team July 14, 2016 11:37 AM UTC

Hi Gordan,   
Thanks for contacting Syncfusion support.   
Use “CommandColumn” feature by default for performing add, edit, delete and update action through customize button at column level. Please find the code example.     
<div e-columns>   
            <div e-column e-field="ShipCity" e-headertext="Ship City" e-textalign="left" e-width="90"></div>   
            <div e-column e-headertext="Manage Records" e-commands="command" e-isUnbound="true" e-width="130"></div>//command column   
$scope.command = [   
                             { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },   
                             { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },   
                             { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },   
                             { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }   
In the above sample, we have created custom button and performed edit operations.  We have created a command column sample for your requirement.   
Please find the online demo:   
Please find the UG Link.   

Query1Any ideas on how to pass the data to the function?   
            We can pass the data through “data” attribute. Please find the code example:   
<script type="text/template"id="actionTemplate">   
        <a class="btn  btn-warning" ng-click="$parent.editAngularRow(data.EmployeeID)">{{data.EmployeeID}}</a>   
     <a class="btn   btn-danger" ng-click="$parent.delete(data.EmployeeID)">{{data.EmployeeID}}</a>   

Query2: Also any idea of now to access the row number in the template?   
We cannot directly access the row number in template. But we can get the row index through “_selectedRow” method of Grid.   
$scope.editAngularRow = function (value) {//get the value from the template   
              var gridObj=$(".e-grid").ejGrid("instance");   
              var index= gridObj._selectedRow();//get the row index   
Query3: How to update the row?   
The “endEdit” method of Grid helps to update the edited value in Grid.   
Please find the UG link:   

K. Karthick  

GO Gordon July 15, 2016 02:36 AM UTC

Hi Karthick,

Thanks for the response.  I can see where I was going wrong and where I need to make the changes.

Thanks again.


KK Karthick Kuppusamy Syncfusion Team July 18, 2016 05:38 AM UTC

Hi Gordon, 
Thanks for the update.  
Please let us know if you need any further assistance. 

Live Chat Icon For mobile
Up arrow icon