Conditional Styling of Rows in the Editable SData DataGrid in Infor CRM Web

In this article we’ll taking a look at how to use conditional styling for rows in the Editable (SData) DataGrid. We’ll change the look (colors, etc) of the row based on conditions in the data. For the example we will be using, we will modify the TicketActivities grid so that punched-in timed activities that were never punched-out will show in red.

First, you need to understand that there’s several different implementations of grids in Infor CRM 8.3 Web. Previously, Editable grids used the Dojox datagrid (the dojox.grid.DataGrid widget). Now, Editable grids use the dgrid.OnDemandGrid widget instead. So, whether or not this will work for you, as demonstrated below, depends on which implementation you’re using, or which version of Infor CRM you’re on. For using conditional styling for the previous implementation using the Dojox grid, you can take a look at this post from Nic Galler. That code is based on the Dojox grid’s onStyleRow event. That isn’t something that exists with the dgrid widget. Also, we’ll be taking a different approach than Nic does. Instead of using setInterval to keep looking for the grid, we’ll instead add code to the GridView.prototype to execute after it creates the internal dgrid. Basically, the generated code for the Editable grid creates a GridView internally and that is what ends up on the page. So, we’ll extend the base GridView prototype and then check the ID of the current grid (since extending the GridView itself is really extending all GridViews on the page, we need to check to make sure we’ve got the right one) and then do an aspect.after to attach code to it’s internal instance of the dgrid’s renderRow. This all gets wired up before the grid loads any data initially, so so by the time it loads the data, our conditional code is ready as each row gets rendered.

We will add a C# LoadAction on the TicketActivities form in AA and then register our code on the form like this:

ScriptManager.RegisterStartupScript(this, GetType(), "script_TicketActivityGrid", @"
require(['dojo/aspect', 'dojo/dom-style', 'dojo/dom-class', 'Sage/UI/GridView'], function (aspect, domStyle, domClass, GridView) {
    aspect.after(GridView.prototype, 'createGridView', function() {
        if (this.id == 'TicketActivitiesgrdTicketActivities') { 
            aspect.after(this.grid._grid, 'renderRow', function(row, args) { 
                var data = args[0];
                if (data.ActivityTypeCode == 'k6UJ9A000033' && !data.CompletedDate) {
                    domStyle.set(row, {background: '#ff5757', color: '#fff'});
                    // or add a class to the row 
                    domClass.add(row, 'row-not-punchedout');
                }
                return row; 
            });
        }
    });
});
", true);

What the code does is it attaches to the Sage.UI.GridView (which the Editable grid creates), checks the ID of the instance to make sure it’s the one we want (the TicketActivities grid – get the ID from the TicketActivities.js file, or you can just assume it is form name + grid control name in AA). Then, if it is the one we want, we attach code to trigger after it creates it’s internal grid control, which we then use to trigger code after the renderRow for that internal grid control. We are passed the element for the row being created and the first index in the args is the SData entry for the row which we check to see if it is a “Timed” activity that is missing a CompletedDate value. If so, we can either modify the style of the row, or add a class to it. The end result looks like this:

As a reference, so you can see better what it is doing, the formatted Javascript code (without the C# code to inject it on the page) looks like this:

require(['dojo/aspect', 'dojo/dom-style', 'dojo/dom-class', 'Sage/UI/GridView'], function (aspect, domStyle, domClass, GridView) {
    aspect.after(GridView.prototype, 'createGridView', function() {
        if (this.id == 'TicketActivitiesgrdTicketActivities') { 
            aspect.after(this.grid._grid, 'renderRow', function(row, args) { 
                var data = args[0];
                if (data.ActivityTypeCode == 'k6UJ9A000033' && !data.CompletedDate) {
                    domStyle.set(row, {background: '#ff5757', color: '#fff'});
                    // or add a class to the row 
                    domClass.add(row, 'row-not-punchedout');
                }
                return row; 
            });
        }
    });
});

Of course, all this breaks the next time Infor changes their grid implementation again, but we’re used to that 😂