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

How to add user defined events while editing record using external template using AngularJS

Thread ID:





120839 Oct 21,2015 12:33 PM UTC Oct 26,2015 12:30 PM UTC JavaScript 4
Tags: ejGrid
Asked On October 21, 2015 12:33 PM UTC

I have to handle events while editig grid record using external template for that i have added one method EditClick() in template for editing and i have to get call in controller because i have do some other functionality and return result to template itself

HTML code is::
 <div ng-controller="DemoController">
      <div id="DemoGrid" ng-model="InstructionTable" ej-grid e-datasource="data"
                                         e-editsettings="editSettings" e-toolbarsettings="toolbarSettings" e-columns="columns">

<script id="template" type="text/x-jsrender" >
        <table cellspacing="10">
                    <td style="text-align: left">
                    <input  value="{{: SrNo}}" class="e-field e-ejinputtext valid" style="width: 116px; height: 28px" />
                <td style="text-align: left">
                    <input   value="{{: Instruction}}" class="e-field e-ejinputtext valid"  style="width: 116px; height: 28px" />
                    <div class="btn-group">
                        <button class="btn btn-primary" e-click="EditClick()" e-ejbutton ng-click="EditClick()"><i class="fa fa-check"></i>&nbsp;Save</button>

Controoller code is:::

App.controller('DemoController', function ($scope) {
var columns = [
                       { field: "SrNo", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
                       { field: "Instruction", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },


    var Data = [
            "SrNo": 1,
            "Instruction": "Instruction NO. 1"
            "SrNo": 2,
            "Instruction": "Instruction NO. 2"
            "SrNo": 3,
            "Instruction": "Instruction NO. 3"
    $scope.editSettings = { allowEditing: true, editMode: ej.Grid.EditMode.InlineTemplateForm, inlineFormTemplateID: "#template" };

    $scope.data = Data;


Isuriya Rajan [Syncfusion]
Replied On October 22, 2015 11:32 AM UTC

Hi Gomtesh,
We have logged the "Angularjs support for editing templates" as a feature and it will be implemented in any of our releases.


Isuriya R.

Replied On October 23, 2015 04:50 AM UTC

can you give me reference links for solving above issue ??

Replied On October 23, 2015 07:11 AM UTC

can you give me reference links for solving above issue ??

because i have to handle events while editing record in controller

Jayaprakash Kamaraj [Syncfusion]
Replied On October 26, 2015 12:30 PM UTC

Hi Gomtesh, 


Your requirement can be achieved by "actionbegin" event. This event is triggered for every grid action before it starts. So, actionBegin event will be triggered while clicking the save button and check whether the request type as “save” and invoke your function inside action begin event. 


 $scope.actionBegin = function (args) { 

                if (args.requestType == "save" ) {

// do your code



Please refer to the following  sample:  



Jayaprakash K


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