AngularJS navigation cellulaire ne fonctionne pas en utilisant avec CellTemplate

Question

J'ai code suivant dans mon contrôleur:

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; 

Et dans mon 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> 

Je l'ai utilisé cellTemplate pour donner la couleur de fond à la cellules de la grille et ui-grid-cellNav pour naviguer entre les cellules de la grille.

Si j'utilise ui-grid-cellNav avec cellTemplate, la navigation cellulaire ne fonctionne pas. Si je commente le code cellTemplate, la navigation cellulaire fonctionne correctement.

Où suis-je frappé? Oubliez la logique de la boucle et tout. Je ne peux pas placer le code entier ici. C'est déjà maladroit.

Answer 1

J'ai utilisé cellClass et cellStyle au lieu de cellTemplate. Voici mon code dans mon contrôleur:

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 
          }); 
        } 

Le code ci-dessus m'a permis d'utiliser à la fois cellNav et le style personnalisé de cellule ensemble.