Angular SlickGrid is it possible to use pagination AND set row color based on value?

Question

Is it possible to set the background color for a row in slickgrid (based on data values) AND use pagination? For angular-slickgrid package.

I used getItemMetadata as suggested multiple other (old) posts - example SlickGrid: How to loop through each row and set color based on the condition?.

This code:

metadata(old_metadata_provider) {  
    return function(row) {  
        var item = this.getItem(row);  
        var ret  = (old_metadata_provider(row) || {});  

        if (item) {  
            ret.cssClasses = (ret.cssClasses || '');  
            if ("attribute" in item) {  
                return { cssClasses: 'redRow' }; //redRow is in styles.css  
            }  
        }  

        return ret;  
    }  
}  

and the call is:

this.dataViewObj.getItemMetadata = this.metadata(this.dataViewObj.getItemMetadata);

It works correctly. However, when I turn pagination on, the color does not work as expected. I read that SlickGrid re-uses the same row elements when scrolling or paginating and will overwrite the styles associated with them. Is there another way to do it? Thanks for any help on this.

I tried adding the following code, after reading suggestion from ghiscoding, but the colors are still not working when pagination is enabled.

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.dataViewObj = angularGrid.dataView;
    this.gridObj = angularGrid.slickGrid;
    this.checkRowBackgroundColor(); //where I call the metadata function from my previous post, if the dataView object is defined.

    //I added this code:
    var self = this;
    this.dataViewObj.onPagingInfoChanged.subscribe(function (e, dataView, grid) {
            self.gridObj.invalidate();
            self.gridObj.render();
    });   
}

Answer 1

Try this approach:

angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.dataViewObj = angularGrid.dataView;
    this.gridObj = angularGrid.slickGrid;

    // check color change logic for the first time page load
    this.checkRowBackgroundColor();

    // use arrow function so that 'this' works properly
    this.dataViewObj.onPagingInfoChanged.subscribe((e, dataView, grid) => {
        // check your color change logic every time Paging Info Changed
        this.checkRowBackgroundColor();
    });   
}

Inside your checkRowBackgroundColor:

checkRowBackgroundColor() {
    // ... any of your logic

    // get metadata
    this.dataViewObj.getItemMetadata = this.metadata(this.dataViewObj.getItemMetadata);

    // rerender the grid after getting new metadata
    this.gridObj.invalidate();
    this.gridObj.render();
}

Your problem should be solved now. As I have not tested on my local machine, I can not give guarantee. You can checkout original documentation of angular-slickgrid about this specific topic here: Dynamically Add CSS Classes to Item Rows