Coloring the Subgrid rows

As we discussed previously, we can use colours for branding purposes and improve the useability. Most clients seem happy to have different colours for different rows within the Subgrid depending on their status or etc.

For example: In my cases I have an Institute entity where sub institutes are in a Subgrid. I am going to give a colour for profit making institutes. (Highlighting expensive quote products within a Quote would make more sense for you). Outcome would be something like this;

How we going to achieve this? This consists of three steps.

1) Wait till Subgid is loaded

Biggest challenge of playing with Subgids is they load in an Asynchronous manner. In that case normal onload would not fire. So we attach a method for loading with a Delay. This is the code in loading;

setTimeout("attachGridAction();", 500);

Now we will implement the relevant method.  This got a trick. In catch statement delays and calls the method again. This allows you to wait and load the code again to see if Subgrid is loaded. Your real code will run only after that is accomplished.

function attachGridAction() 
{ 
  try 
  {
    var _grid = document.getElementById("Sub_Org_List");
    if ((_grid) && (_grid.readyState == 'complete'))
    {
        // Code goes here
    }
  }
  catch (err) 
  {
       setTimeout("attachGridAction();", 500);
  }
}

2) Determine the criteria

Now you need to determine the criteria of the records to be coloured. Actually you need to read the relevant Guids. Read the relevant Fetch XML as below. If you uncomment the second line, you will see the fetch xml statement of the Subgrid. Now you are free to retrieve those records and determine the Guids according to your criteria.

var _fetch = document.getElementById("effectiveFetchXml");
//alert(_fetch.value);

3) Colouring the row

Now you have the Guids ready. Now perform this code within a loop for your Guids; (I am just using one single record to make it clearer)

var _checkbox =   document.getElementById('checkBox_{4ACC296A-0CE5-E211-A9C3-00155D467A0E}');
var _checkboxParentParent = _checkbox.parentNode.parentNode;
_checkboxParentParent.bgColor = 'DarkKhaki'; 

Limitation;
As you may guess, this doesn’t work for next pages if paging is performed for Subgrid. What you can do is increase the items in the Subgrid allowing to have a scrollbar and ignore the paging option.