AngularJS, Template and Event Problem

[Gordon]

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>

        </div>

    </script>

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.

Regards

Gordon

[Karthick Kuppusamy]

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   

        </div>   

   

   

$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.   

  

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular_sample1869947030.zip.   

  

Please find the online demo:   

http://js.syncfusion.com/demos/web/#!/azure/grid/editing/commandcolumn.   

  

Please find the UG Link.   

http://help.syncfusion.com/js/grid/columns#command-column.   

  

Query1: Any 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>   

    </script>   

  

   

  

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:   

http://help.syncfusion.com/js/api/ejgrid#methods:endedit.   

  

Regards,   

K. Karthick  

[Gordon]

Hi Karthick,

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

Thanks again.

Gordon

[Karthick Kuppusamy]

Hi Gordon, 

 

Thanks for the update.  

Please let us know if you need any further assistance. 

 

Regards, 

K.Karthick