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.
Unfortunately, activation email could not send to your email. Please try again.

AngularJS, Template and Event Problem

Thread ID:

Created:

Updated:

Platform:

Replies:

124989 Jul 13,2016 02:33 AM Jul 18,2016 01:38 AM JavaScript 3
loading
Tags: ejGrid
Gordon
Asked On July 13, 2016 02:33 AM

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 [Syncfusion]
Replied On July 14, 2016 07:37 AM

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.   
  
  
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>   
    </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:   


 
 
Regards,   
K. Karthick  


Gordon
Replied On July 14, 2016 10:36 PM

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 [Syncfusion]
Replied On July 18, 2016 01:38 AM

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


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.

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.

;