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