
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,
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 😂
Subscribe To Our Newsletter
Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!
You have Successfully Subscribed!