AngularJS cell navigation not working while using with celltemplate - angularjs

Question

I am having following code in my controller:
app.controller("homeController", homeController);
homeController.$inject = ["ui.grid.cellNav", "$scope"];
$scope.gridOptions = {
enableRowSelection: true,
enableSelectAll: true,
modifierKeysToMultiSelect: false,
enableRowHeaderSelection: false,
};
vm.objectViewGridOptions = {
enableColumnMenus: false,
enableSorting: true,
enableGridMenu: true,
angularCompileRows: true,
multiSelect: false,
modifierKeysToMultiSelect: false,
enableRowSelection: true,
enableRowHeaderSelection: false,
exporterMenuPdf: false,
onRegisterApi: function (gridApi) {
//set gridApi on scope
vm.objectViewGridOptions.gridApi = gridApi;
gridApi.cellNav.on.navigate($scope, function (newRowCol, oldRowCol){
vm.objectViewGridOptions.gridApi.selection.selectRow(newRowCol.row.entity);
vm.objectViewGridOptions.gridApi.core.notifyDataChange($scope.gridApi.grid, uiGridConstants.dataChange.COLUMN);
});
}
};
var colDef = [];
for (var i = 0; i < columnNames.length; i++) {
if (i < 4) {
colDef.push(
{
field: columnNames[i],
displayName: columnNames[i],
width: '100',
// Highlighting first row in ui-grid
cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,true)}">{{ COL_FIELD }}</div>',
sortingAlgorithm: sort
});
}
else
colDef.push(
{
field: columnNames[i],
displayName: columnNames[i],
width: '100',
cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,false)}" >{{ COL_FIELD }}</div>',
sortingAlgorithm: sort
});
}
vm.objectViewGridOptions.columnDefs = colDef;
And in my HTML:
<div style="clear:both;" ui-grid="vm.objectViewGridOptions" ng-if="vm.objectViewGridOptions.data" ui-grid-resize-columns ui-grid-cellnav ui-grid-move-columns ui-grid-exporter class="objectviewgrid"></div>
I have used cellTemplate to give background color to the grid cells and ui-grid-cellNav to navigate between the grid cells.
If I use ui-grid-cellNav along with cellTemplate, cell navigation is not working. If I comment out the cellTemplate code, then the cell navigation is working fine.
Where am I getting struck? Forget about the loop logic and all. I cannot place the entire code here. This is already looking clumsy.

Answer 1

I have used cellClass and cellStyle instead of cellTemplate. Here is my code in my controller:
for (var i = 0; i < columnNames.length; i++) {
if (i < 4) {
colDef.push(
{
field: columnNames[i],
displayName: columnNames[i],
width: '100',
// fix for highlighting first row in ui-grid
//cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,true)}">{{ COL_FIELD }}</div>',
cellClass: 'ui-grid-cell-contents',
cellStyle: { 'background-color': 'backgroundColor(row, true)' },
sortingAlgorithm: sort
});
}
else
colDef.push(
{
field: columnNames[i],
displayName: columnNames[i],
width: '100',
//cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,false)}" >{{ COL_FIELD }}</div>',
cellClass: 'ui-grid-cell-contents',
cellStyle: { 'background-color': 'backgroundColor(row, false)' },
sortingAlgorithm: sort
});
}
The above code allowed me to use both cellNav and cell custom style together.