Qwertiy Qwertiy - 3 months ago 49
AngularJS Question

Cell class change is postponed till next edit or scroll

I'm trying to mark edited in UI Grid cell by blue color. For this purpose in

afterCellEdit
event I make some changes in the row entity.
cellClass
function checks for these marks and returns corresponding class name. Call to
$scope.$apply
(specified in documentation) is also used.

Following example is simplified as there is no check, what column has been edited. In the real app I have more complicated code to mark specific cell. But this example is enough to show the problem:


  1. Select cell in
    Company
    column (but not in the last row).

  2. Change the value there.

  3. Press Enter.

    Tha value changes,
    Edited
    column changes to true, selection moves to the next row, but the text in edited cell is still black.

  4. Press Enter again.

    Text in edited on step 2 cell becomes blue.



How can I force color change on step 3 instead of 4?

http://plnkr.co/edit/SEEf4DPhA3CB1mx7R4I8?p=preview



var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.cellNav']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
enableCellEditOnFocus: true,

columnDefs: [{
field: 'edited',
enableCellEdit: false
},{
field: 'company',
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
return row.entity.edited ? 'blue' : '';
}
}],

onRegisterApi: function (gridApi) {
gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
if (newValue !== oldValue) {
rowEntity.edited = true;
$scope.$apply();
}
});
}
};

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);

.grid {
width: 500px;
height: 200px;
}

.blue {
color: blue;
}

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">

<div ng-app="app" ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-edit ui-grid-cellNav class="grid"></div>





PS: Same question in Russian.

Answer

You can use notifyDataChange to let uigrid know the value has changed.

juste inject uiGridConstants in your controller and replace $scope.apply() by gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.cellNav']);

    app.controller('MainCtrl', ['$scope', '$http','uiGridConstants', function ($scope, $http,uiGridConstants) {
    $scope.gridOptions = {
    enableCellEditOnFocus: true,

    columnDefs: [{
      field: 'edited',
      enableCellEdit: false
    },{
      field: 'company',
      cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
        return row.entity.edited ? 'blue' : '';
      }
    }],

    onRegisterApi: function (gridApi) {
      gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
        if (newValue !== oldValue) {
          rowEntity.edited = true;
          gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
        }
      });
    }
};

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

A working plunker : http://plnkr.co/edit/GrseKTm6EF2CdWiNhXM7?p=preview

Comments