How to render TreeGrid using Angular Template
We can render the row template using Angular JS template in TreeGrid. For Angular JS we need to use the template type as "text/ng-template". The templates inside the ej-controls will create a new child scope, so to call the parent scope function, we need to use the “$parent” property in the template. The below code example explains how to bind the click event to a button using angular template.
<body ng-controller="TreeGridCtrl">
<div id="treegridangularrowtemplate" ej-treegrid e-datasource="data" e-rowtemplateid="rowTemplateID">
</div>
<script type="text/ng-template" id="rowTemplate">
<tr>
<td class="border" style='height:99px;'>
<div>{{data.EmployeeID}}</div>
</td>
<td class="border" style='height:99px;'>
<div style="font-size:14px;">
{{data.Name}}
<p style="font-size:9px;">{{data.Designation}}</p>
<button ng-click="$parent.row()">Row Button</button>
</div>
</td>
<td class="border" style='height:99px;'>
<div style="display:inline-block;">
<div style="padding:5px;">{{data.FullName}}</div>
<div style="padding:5px;">{{data.Address}}</div>
<div style="padding:5px;">{{data.Country}}</div>
<div style="padding:5px;font-size:12px;">{{data.Contact}}</div>
</div>
</td>
<td class="border" style='height:99px;'>
<div>{{data.DOB}}</div>
</td>
</tr>
</script>
angular.module('listCtrl', ['ejangular'])
.controller('TreeGridCtrl', function ($scope) {
//
$scope.rowTemplateID = "rowTemplate";
$scope.altRowTemplateID = "altRowTemplate";
$scope.row = function () {
alert("Row Template")
}
});
A sample to render the TreeGrid using Angular template is available in the following link, Sample
