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