Conditional Styling of InforCRM Grid with onStyleRow

This is a very common request – the customer wants to see some rows highlighted in the data grid based on the data. For example, they might want to see opportunities with a sales potential above $1M highlighted in green. How might we achieve that in InforCRM?

There is no mechanism “out of the box” for it, but it is definitely possible to leverage the underlying capabilities of the dojo grid (see grid row styling) to achieve the look. The challenge becomes then converting the dojo documentation into something that we can use in Saleslogix.

First step: convert the code from declarative style to procedural style (we won’t be able to use the declarative style from InforCRM since the grid is instantiated via code):

grid.on('StyleRow', function (gridRow) {
    var item = grid.getItem(gridRow.index);
    var pot = grid.store.getValue(item, "SalesPotential");
    if (pot > 1000000) {
        gridRow.customStyles += "color: red;";
    }
});

Second step: how do we get that code to run inside of InforCRM?? Unfortunately the grid is created inside of an anonymous function that runs via a setTimeout call, so it’s pretty hard to hook into it directly. But we know the grid’s id (it’s hardcoded in the javascript file) so we can just register a script to run at a short interval until the grid is available, then add our style code to it.

For good measure we’ll add a call to resize() – this forces the grid to repaint its rows, applying our styles, in the unlikely event that it already got the rows built by the time our function runs.

ScriptManager.RegisterStartupScript(this, GetType(), "StyleGridRows", @"
require(['dijit/registry'], function(registry) {
    var i = setInterval(function() {
        var grid = registry.byId('AccountOpportunitiesgrdOpportunities');
        if(grid) {
            clearInterval(i);
            grid.on('StyleRow', function (gridRow) {
                var item = grid.getItem(gridRow.index);
                var pot = grid.store.getValue(item, 'SalesPotential');
                if (pot > 1000000) {
                    gridRow.customStyles += 'color: red;';
                }
            });
            grid.resize();
        }
    }, 250);    
});
", true);

I hard coded the id, but that’s OK, because it’s hard coded in the AccountOpportunities.js script also. Search for “id:” in that file, or use the Chrome developer tool, to find out what the id is.
Be sure to get the grid’s id and not the “gridNodeId” (which will end in _Grid) – that one is the container and does not have the style functions.

Here is the end result… obviously you can get “customStyles” as fancy as you want, you can also use “customClasses” to use a custom CSS class:

Although the example is simplistic this is a powerful visualization aid and I think once it is prettied up a little bit the users will like it. Leave a comment if you have an interesting use of the onStyleRow event!