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 some 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>    
    <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 ng-show="col.allowResize" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>
</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' ]
 };