https://github.com/angular-ui/ui-grid/wiki/Templating
$scope.gridOptions = {
data: self.myData, enableCellEditOnFocus: true, //enables the editor on a single click, if you use enableCellEdit: true you would have to doubleclick columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90 }, { field: 'lastName', displayName: 'Last Name', width: 80 }, { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader', editableCellTemplate: '<div><form name="inputForm"><input type="number" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>' } ] };
Templating
Pages 10
Clone this wiki locally
Check latest default templates at ui-grid/templates
Row Templates
Default Row Template:
// passed in as a string
<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div><div ng-cell></div></div>
Example:
$scope.gridOptions = {
data: self.myData, rowTemplate: '<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>' };
That way you can add some styling!
Default header template:
<div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell" ng-header-cell></div>
Double Click on Row Template:
Example:
$scope.gridOptions = {
data: self.myData, rowTemplate: '<div ng-dblclick="onDblClickRow(row)" ng-style="{ \’cursor\’: row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div><div ng-cell></div></div>' }; $scope.onDblClickRow = function(rowItem) { // do something here with rowItem.rowIndex };
Cell Templates
Default Cell Template:
<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)}}</div>
Example:
$scope.gridOptions = {
data: self.myData, columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, cellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)}}</div>' }, { field: 'lastName', displayName: 'Last Name', width: 80 }, { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' } ] };
Editable Cell Templates
It is possible to make the cells editable, and you can even define your own template for the editor.
Default Editable Cell Template:
<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="'colt' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>
Example ('number' style input for the age column):
$scope.gridOptions = {
data: self.myData, enableCellEditOnFocus: true, //enables the editor on a single click, if you use enableCellEdit: true you would have to doubleclick columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90 }, { field: 'lastName', displayName: 'Last Name', width: 80 }, { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader', editableCellTemplate: '<div><form name="inputForm"><input type="number" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>' } ] };
When editing a cell, the ng-cell-has-focus directive will broadcast a message named ngGridEventStartCellEdit to let all children know that you can now give yourself focus. When the editable cell template is done with editing (usually on a blur event) you need to emit ngGridEventEndCellEdit to let ng-cell-has-focus know that you are done editing and it will then show the non-editable cell template. The reasoning for this is (good quote): "Now I can wrap my input elements in divs/spans, whatever and control exactly what element's blur triggers the end edit" - @swalters.
If you search for the 'ngInput' directive in ng-grid's source code, you will find that that is exactly what this directive implements for input elements. So if you need to create your own 'cell editor', you could create your own directive that would listen to and emit the right events, to make your component work as expected.
An example (used for ng-input directive):
scope.$on( 'uiGridEventBeginCellEdit', function () { elm.focus(); } ); //focus the input element on 'start cell edit'
angular.element( elm ).bind( 'blur', function () { scope.$emit( 'uiGridEventEndCellEdit' ); } ); //when leaving the input element, emit the 'end cell edit' event
Remember also to name the form as 'inputForm' in order to enable CANCEL EDIT and END EDIT differentiation based on form validation.
Header Cell Templates
Default Header Cell Template:
<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !noSortVisible }"> <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div> <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div> <div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div> <div class="ngSortPriority">{{col.sortPriority}}</div> <div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div> </div> <div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>
Example:
var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+ '<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+ '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+ '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+ '<div class="ngSortPriority">{{col.sortPriority}}</div>'+ '</div>'+ '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>'; $scope.gridOptions = { data: self.myData, columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, headerCellTemplate: myHeaderCellTemplate }, { field: 'lastName', displayName: 'Last Name', width: 80 }, { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' ] };