CellClass doesn't change on cellEditing.

[roedit]

Hi. I found a new issue. cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) { if (grid.getCellValue(row,col) === 'Velity') { return 'blue'; } } I'm editing the grid and change the random cell value to 'Velity', And the grid does not apply the class on the cell. Also I'm updating the cellClass after editing and nothing happens. gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){ colDef.cellClass = 'orange'; $scope.$apply(); }); Tried also with a function instead of the 'orange' string . And still nothing. Also i tried to reset the grid after it. gridApi.core.refresh();

Nothing seems to be working , only rebuilding the grid. Could you please help me with an advice, or tell me if i'm wrong ?? Thank you.

[PaulL1]

Any change of providing a plunker for this? That would make it easier to diagnose.

[roedit]

Yes , sure ! Here is a plunker : http://plnkr.co/edit/OKdG9h4QxUevrp94wW0p?p=preview

The only implementation that worked for me was saving the data object with the new values, each time i'm changing a value , then refreshing the page . Thanks.

[PaulL1]

OK, thanks for this. It looks to me like we set the colouring in code (i.e. it doesn't use ng-class), but that there is actually an ng-class on each cell that relates to rowHeader.

I think from discussions with @c0bra that our preference is to not use ng-class, as that gets validated on every scroll event for every cell, so probably the right answer is to change both of them, but also to have an explicit trigger to recalculate when a cell is changed.

[PaulL1]

This one is perhaps another example of #1819, which could benefit from some standard patterns.

[PaulL1]

Refer pull request #1842 , which I think will resolve this.

[PaulL1]

I've merged and it's updated through to ui-grid.info. I've checked your plunker, and it now looks to be updating the cell class when you edit a cell to Velity.

[roedit]

I've checked and it seems to be working. Thanks.

[RafaDom]

Thanks a lot PauL1 !! We've been waiting on this . I just decided to Post this problem. And look, there's already a fix for this :+1: :)

[juliusakula]

I made a function which finds the range of the column, and assigns a color class based on the value of the row - Say I have a column with numbers and 5 rows , numbers 5 through 10. "5" will be green , "7" will be yellow, "8" will be orange, "10" will be red.

Updating to latest version fixed the bug in it where when you clicked sort the numbers would move, but the background color would stay in the same location (giving numbers the "wrong" color). I've never fixed a bug by updating my libraries before so, Tip of the Hat to people constantly contributing to this project.

I have a plunkr here, and I think it would make a very interesting/cool custom menu item for the 303 tutorial - (the data will need a numeric column like Age) - Also, the plunkr below doesn't have the turning on and off via the column menu because I can't get the part that involves a service to work. I'm thinking the cellClass doesn't know it is watching that service for changes. any ideas?

//see plunkr (bottom of this comment)
app.service('coloredColService', function(){
    return {name: true, company: false};
});
columnDefs: [{ field: 'name', 
    menuItems: [
        {   icon: 'ui-grid-icon-ok',
            title: "Toggle Color",
            action: function(){ 
              alert(this.context.col.colDef.name + " is " + coloredColService[this.context.col.colDef.name]);
              coloredColService[this.context.col.colDef.name] = false; // = !coloredColService[this.context.col.colDef.name];}
        }],
        cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
          // ...{ see plunkr }
          if(coloredColService[this.name]){
            return 'group' +  qwer;
          }}},
      { field: 'company' }], 

// ... see plunkr http://plnkr.co/edit/AzyY6zfB39jFdWl0XhiZ?p=preview

[PaulL1]

So what this does is allow people to set colours on a column? I'm not quite clear on the intent, but if you think it is something people would want, I could imagine it as an additional feature that people include or don't include as they see fit. Pinning, for example, adds items to the column menus when it is enabled.

However, I think you'd need some way to tailor what the colours are that are used, and when they are applied. Which would be quite a bit more work.

[juliusakula]

The intent here is to apply a color scale on a column, so the highest values in the column are at one end of the spectrum, and lowest values of the column are at the other. In the plunkr the CSS groups range from red to yellow to green. This is for reports of sent emails, the reports have color scales to say this message had a 75% open rate (that would be green, "good"), but that one had a 1% open rate (red, "bad"). Everything in the middle is yellow (which is the middle range of my particular colors array), and it makes outliers visually pop out as the colors at the end of the spectrum are brighter. I'm likely working on this exact thing for a while and can make it more fully featured as you mention.

One issue I see in making this a module/feature, is that a css file has to be generated from a hex-value array. That plunkr has the results from a generator (see main.css) which was given the colorsArray with 20 values from red to yellow to green. Only reason CSS is in the picture is because cellClass: property in columnDefs assigns a class, and can't just assign "style='background-color: colorsArray[i]'"... Is it possible for a feature to make a CSS file from a passed in array? How could I workaround if not? I do have colorsArray in there currently, and it is only used for it's length property, as I'm using a generated CSS file to give the different colors since I haven't figured how to generate one on-the-fly.

Another issue is that I can't seem to get it conditionally apply the color scale (turn on and off via column menu) with only that if statement at the bottom of the cellClass function, and a service which holds information on which columns have this color currently applied. I also tried this: http://plnkr.co/edit/hRrpvBpZd4H8xDLB38ea?p=preview with a isColored prop in the columnDefs instead of a service, and i can't figure out how to toggle this cellClass. Might be overcomplicating this toggl-ing.

If you can help me figure out what I have to code to make this a feature, I can do the coding and make a PR, but right now I don't know what work is cut out for me, can't figure out those 2 issues (and I might be going about them wrong). Also haven't done a contribution to open source before and I'd really like to.

[PaulL1]

The contribution end is easier - take a look at https://github.com/angular-ui/ng-grid/blob/master/FIRST_TIMER.md

If you were going to build a feature to do it, then instead of just applying a cellClass, you could perhaps build a directive, which could then set the colour directly using jqLite. There is a bit of fiddling around to make it work, particularly with sorting, with people changing configuration dynamically etc etc. But it's possible.

[janiangular]

Hi Paul

I have the same requirement when editing the cell need to change the class i have taken latest ui grid and try the above approach the new class is not appending let me know still the issue is open please share you have any working code.

Regards, Basha

[elsuenog]

I have a requirement something like this one but I am not trying to match the cell value to anything specific. It's basically how he tried changing the cellClass to orange in the plunker above. I just want to highlight the cell after its been edited. I have tried using

        gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
            if (newValue != oldValue) {
                colDef.cellClass = 'cellChange';
                $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.EDIT);
            }
        });

and I don't get the results I'm looking for. I tried changing the dataChange to ALL or COLUMN and that highlights the whole column and not the cell that has been changed.