Category / Section
How to customize the TreeGrid column using angular template ?
1 min read
In tree grid, the column can be customized with angular template by defining the isTemplateColumn and angularTemplate properties in column array collection.
- isTemplateColumn is a Boolean property used to denote a template column.
- angularTemplate is a property used to map the template ID to the column.
The below code snippet explains how to customize the tree grid column using angular template.
ASPX
<div ng-app="listCtrl">
<div ng-controller="TreeGridCtrl">
<div style="height: 370px; width: 100%;" ej-treegrid e-datasource="treeData" e-columns="columns" e-childmapping="Children" e-rowHeight="60">
</div>
</div>
</div>
<script src="Scripts/TreeGrid/angular.min.js"></script>
<script src="Scripts/TreeGrid/ej.widget.angular.min.js"></script>
<script type="text/ng-template" id="ngColumnTemplate">
<img src="Images/{{data.FullName}}.png" />
//..
</script>
<script type="text/javascript">
var treeData = [{
"Name": "Robert King",
"FullName": "Robert King",
"Designation": "Chief Executive Officer",
"EmployeeID": "EMP001",
"Address": "507 - 20th Ave. E.Apt. 2A, Seattle",
"Contact": "(206) 555-9857",
"Country": "USA",
"DOB": "2/15/1963",
"Children": [{
"Name": "David william",
"FullName": "David william",
//…
}]
}];
var columns = [
{ field: "Address", headerText: "Employee Details", isTemplateColumn: true, angularTemplate: "#ngColumnTemplate" },
//…
];
angular.module('listCtrl', ['ejangular'])
.controller('TreeGridCtrl', function ($scope) {
$scope.columns = columns;
//…
});
</script>
Sample for rendering a tree grid column with angular template is available here.
