Templating

Row Templates

---

Default Row Template:

// passed in as a string
    <div ng-repeat="col in columns" style="width: {{col.width}}px" class="ngCell {{columnClass($index)}} {{col.cellClass}}" ng-cell></div>

Example:

    $scope.gridOptions = {
        data: self.myData,
        rowTemplate: '<div ng-repeat="col in columns" style="height:{{rowHeight}}; width: {{col.width}}px" class="ngCell {{columnClass($index)}} {{col.cellClass}}" ng-cell></div>'
 };

That way you can add styling

Cell Templates

---

Default Cell Template:

<div>{{row.entity[col.field]}}</div>

Example:

    $scope.gridOptions = {
        data: self.myData,
        columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, cellTemplate: '<div>{{row.entity[col.field]}}</div>' },
                     { field: 'lastName', displayName: 'Last Name', width: 80 },
                     { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' ]
 };

Header Cell Templates

---

Default Cell Template:

<div ng-click="col.sort()" ng-class="{ \'ngSorted\': !noSortVisible }">
    <span class="ngHeaderText">{{col.displayName}}</span>
    <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>
    <div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>
</div>
<div class="ngHeaderGrip" ng-show="allowResize" ng-mouseDown="gripOnMouseDown()"></div>
<div ng-show="_filterVisible">
    <input type="text" ng-model="col.filter" style="width: 80%" tabindex="1" />
</div>

Example:

    $scope.gridOptions = {
        data: self.myData,
        columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, 
headerCellTemplate: '  <div ng-click="col.sort()" ng-class="{ \'ngSorted\': !noSortVisible }">'+
'      <span class="ngHeaderText">{{col.displayName}}</span>'+
'      <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
'      <div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
'  </div>'+
'  <div class="ngHeaderGrip" ng-show="allowResize" ng-mouseDown="gripOnMouseDown()"></div>'+
'  <div ng-show="_filterVisible">'+
'      <input type="text" ng-model="col.filter" style="width: 80%" tabindex="1" />'+
'  </div>' },
                     { field: 'lastName', displayName: 'Last Name', width: 80 },
                     { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' ]
 };