ExtJS 5 : Style/Colorize or Strip your grid data rows based on record content

Introduction

Just a little tip/reminder on how to style (color/strip) your grid data rows in ExtJS 5.x  (based on a record value for row style)

Action!

In fact, it is VERY easy and done in couple of lines. Two sections here:

1. Colorize/Stylish your row based on record value
2. Strip your rows easily

1) If you want to colorize/stylish your row based on record value:

First, define your css for the row, for example:

.color1-row .x-grid-cell {
    background-color: #ffda1e;
    /*color: #900;*/
}

.color2-row .x-grid-cell {
    background-color: #72b5ff;
    /*color: #900;*/
}

.color3-row .x-grid-cell {
    background-color: #209939;
    /*color: #090;*/
}

Here, the trick is to specify “x-grid-cell” after your css.

Second, add a viewConfig section within gridpanel declaration, and within viewConfig, write the getRowClass function which should return the class to use, based on a record value.

{
    xtype: 'gridpanel'
[...]
    ,viewConfig: {
        stripeRows: false, // if stripeRows is true, your rows are ... stripped!
        getRowClass: function(record) {
           if (record.get('value') == 1) return "color1-row";
           else if (record.get('value') == 2) return "color2-row";
           else if (record.get('value') == 3) return "color3-row";
           else return "";
        }
    }

Result Sample:

2) If you simply want to stripped your row:

Remove the getRowClass, set stripedRows to true AND defines a style for x-grid-item-alt

.x-grid-item-alt {
    background-color: #50100b !important;
    color: #f2f2f2 !important;
}

Conclusion

Next time, I’ll try to cover column style within a grid row.

UI-Grid v3 : Custom Cell Renderer

I was recently playing with Angular-UI’s ui-grid v3 module and I was wondering how to define custom cell renderer; especially for address rendering. The tutorial explains that, basically, you need to define a function for each data in your dataset. For example, here, we got a function just for the Zip

var app = angular.module('app', ['ngTouch', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', function ($scope) {
 
$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', field: 'getZip()'}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };
}]);

It works, but not really efficient on large dataset. The solution comes from “Cell Template” and direct binding to the current row entity

   columnDefs: [
          { name:'firstName', field: 'first-name' },
          { name:'1stFriend', field: 'friends[0]' },
          { name:'city', field: 'address.city'},
          { name:'getZip', cellTemplate: '{{row.entity.address.zip}}'}
        ],
        data : [      {
                           "first-name": "Cox",
                           "friends": ["friend0"],
                           "address": {street:"301 Dove Ave", city:"Laurel", zip:"39565"},
                           "getZip" : function() {return this.address.zip;}
                       }
                   ]
      };

Thus, you can build really complex columns for example with multiple buttons and so on. For my address issue, I did 2 things
1) I create a new angular’filter called ‘addrshort” :

app.filter('addrshort', function() {
  return function(address) {
    return address.join(" ");
  }
});

2) I change the cell template to:

cellTemplate: {{row.entity.address|addrshort}}

BUT there is one limitation : default filtering doesn’t work