MS CRM 2011: How to colorize grid rows based on some conditions

In CRM 2011, I found a way to add color to entities grids using the ribbon, even if there are still two limitations:

1) This is still not supported (as I browse and change DOM as you will see below) but does not required access to the filesystem
2) Ribbon element that helps me to colorize the grid view can’t be hidden and it is useful just to add color, it should then not be visible…

To accomplish this you need to perform three tasks
1) Add Ribbon Button

This button is added in the HomePageGrid of an case entity (but could also be added to SubGrid). It has an Enable rule that perform the grid colorization and returns always false to be deactivated. This is the last remaining difficulty, the SDK doesn’t allow to use a customRule to manage DisplayRule, so we can just deactivate the button.

<RibbonDiffXml>
<CustomActions>
<CustomAction Id="Mscrm.HomepageGrid.incident.MainTab.Actions" Location="Mscrm.HomepageGrid.incident.MainTab.Actions.Controls._children" Sequence="20">
<CommandUIDefinition>
<Button Id="Mscrm.HomepageGrid.incident.Colorization.Button" Command="Mscrm.HomepageGrid.incident.Colorization.Button.Command" CommandType="General" Image32by32="/_imgs/Ribbon/Actions_32.png" LabelText="Colorize" Sequence="22" TemplateAlias="o1" />
</CommandUIDefinition>
</CustomAction>
</CustomActions>
<Templates>
<RibbonTemplates Id="Mscrm.Templates"></RibbonTemplates>
</Templates>
<CommandDefinitions>
<CommandDefinition Id="Mscrm.HomepageGrid.incident.Colorization.Button.Command">
<EnableRules>
<EnableRule Id="ColorizeRule" />
</EnableRules>
<DisplayRules />
<Actions />
</CommandDefinition>
</CommandDefinitions>
<RuleDefinitions>
<TabDisplayRules />
<DisplayRules>
<DisplayRule Id="testRule">
<CrmClientTypeRule
Default="false"
InvertResult="false"
Type="Outlook" />
</DisplayRule>
</DisplayRules>
<EnableRules>
<EnableRule Id="ColorizeRule">
<CustomRule
Default="true"
InvertResult="false"
FunctionName="load"
Library="$webresource:mctools_/ColorView/jQuery_1_7_1.js" />
<CustomRule Default="true" InvertResult="false" FunctionName="load" Library="$webresource:new_jQuery_1_7_1" />
<CustomRule Default="false" InvertResult="false" FunctionName="load" Library="$webresource:new_case_colour_enabled">
<CrmParameter Value="SelectedControlAllItemReferences" />
<CrmParameter Value="SelectedControl" />
</CustomRule>
</EnableRule>
</EnableRules>
</RuleDefinitions>
<LocLabels />
</RibbonDiffXml>

2) jQuery library

Download the latest version from jQuery web site and add a new function to permit load of this script file from ribbon. jQuery will help us writing faster code…

3) A custom library

The custom library has a unique function with two parameters:
A list of entityReference that contains the grid elements displayed
The grid control itself

Script File we are using is

function load(items,grid)
{
try
{
if(items)
{
var index = $("#gridBodyTable").find("col[name=gendercode]").index();
/*//to colour a specific cell of grid row
var a = document.all['crmGrid'].InnerGrid.AllRecords;
alert(a);
alert(a.length);
for (var i=0; i <a.length; i++)
{
alert(a[i][a[i].length-1].cells[3].innerText);

if(a[i][a[i].length-1].cells[3].innerText=='Homme')
{
a[i][a[i].length-1].cells[3].style.backgroundColor='CCFF33';
}
if(a[i][a[i].length-1].cells[3].innerText=='Femme')
{
a[i][a[i].length-1].cells[3].style.backgroundColor='FF9966';
}

}*/

/*
$('table tr :nth-child(3)').css('background-color', 'red');
$('table tr :nth-child(3)').innerHtml();
var myValue = $(this).parents('tr:first').find('td:eq(4)').text();

*/
//To colour a grid row
for(var i=0;i<items.length;i++)
{
var id = items[i].Id;

$(grid._element).find("tr[oid='" + id + "']").each(function()
{
var theTr = $(this);

//alert(theTr);
//alert(theTr.find("td:nth-child(4)")[0].innerText);
//theTr.find("td:nth-child(" + (index/1 + 1/1) + ")")[0].innerText

if(theTr.find("td:nth-child(5)")[0].innerText.indexOf("Normal") >= 0)
{
theTr.find("td").css("background-color","lightblue");
}
else if(theTr.find("td:nth-child(5)")[0].innerText.indexOf("Low") >= 0)
{
theTr.find("td").css("background-color","pink");
}
else if(theTr.find("td:nth-child(5)")[0].innerText.indexOf("High") >= 0)
{
theTr.find("td").css("background-color","red");
}
});
}
}
}
catch(e)
{
alert(e.description);
}
}


5) Screenshot



For More Information please read the mscrmtools blog