Category / Section
How to render TreeGrid using Angular Template
1 min read
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
