Category / Section
How to use Angular template in the column of the Grid ?
1 min read
You can render the column template directly in the Angular Grid column element with its Angular directives. The Angular controller scope values can be used by $parent property in the template.
Initialize the Grid with the column template. Declare the image template with the Angular directive (ng-src) and Angular scope value ($parent.title).
<div id="Grid" ej-grid e-datasource="data" e-pagesettings-pagesize="5" e-allowpaging="true">
<div e-columns>
<div e-column e-headertext="Image" e-textalign="left" e-width="50">
<img style="width: 75px; height: 70px" ng-src="Employees/{{data.EmployeeID}}.png" alt="{{$parent.title}}" />
</div>
<div e-column e-field="FirstName" e-headertext="First Name" e-textalign="left" e-width="100"></div>
<div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="100"></div>
<div e-column e-field="Title" e-headertext="Title" e-textalign="left" e-width="100"></div>
<div e-column e-field="City" e-headertext="City" e-textalign="left" e-width="100"></div>
<div e-column e-field="Country" e-headertext="Country" e-textalign="left" e-width="100"></div>
</div>
</div>
Define the Grid DataSource and scope value in the Angular controller.
<script>
var obj = [
{ "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy", "Title": "Sales Representative", "City": "Seattle", "Country": "USA" },
{ "EmployeeID": 2, "LastName": "Fuller", "FirstName": "Andrew", "Title": "Vice President, Sales", "City": "Tacoma", "Country": "USA" },
{ "EmployeeID": 3, "LastName": "Leverling", "FirstName": "Janet", "Title": "Sales Representative", "City": "Kirkland", "Country": "USA" },
{ "EmployeeID": 4, "LastName": "Peacock", "FirstName": "Margaret", "Title": "Sales Representative", "City": "Redmond", "Country": "USA" },
{ "EmployeeID": 5, "LastName": "Buchanan", "FirstName": "Steven", "Title": "Sales Manager", "City": "London", "Country": "UK" },
----------
----------
];
angular.module('listCtrl', ['ejangular'])
.controller('PhoneListCtrl', function ($scope) {
$scope.data = obj;
$scope.title = "img";
});
</script>
The output of above sample is as follows.
