Adding Row Colours to CRM 2013 Sub-Grids dynamically based on value in cells

deepeshsomani2013 Microsoft Dynamics CRM

Sometimes we get requirement to show colour encoding on sub-grid in CRM 2013 forms. One of the

Queries I received was ways to achieve them. Here is a sample of what I tried on Case sub-grid on

Vanilla CRM Account form:

clip_image001

Here is the script:

I have got of lot of feedback to put more details of where to put scripts and stuff, so here it goes.

Sub-grid name can be found from FORM EDITOR. Refer screen below(Double click the sub-grid will give a property window):

image

Now the script, Add the below function to form onload

function subGridOnload()
{
var grid = $(‘#accountcasessgrid’);  //Replace Grid name here
if (grid == null)
{
// delay one second and try again.
setTimeout(subGridOnload, 1000);
return;
}

if(grid[0] == undefined)
{
// delay one second and try again.
setTimeout(subGridOnload, 1000);
return;
}

if(grid[0].control == undefined)
{
// delay one second and try again.
setTimeout(subGridOnload, 1000);
return;
}

if(grid[0].control == null)
{
// delay one second and try again.
setTimeout(subGridOnload, 1000);
return;
}

if (grid[0].control.get_totalRecordCount() == -1)
{
// delay one second and try again.
setTimeout(subGridOnload, 1000);
return;
}

// logic Replace status names and colours as required

$(‘#accountcasessgrid td’).filter(function() {
return $(this).text() == ‘Resolved’;
}).closest(‘tr’).css(‘background-color’, ‘green’);
$(‘#accountcasessgrid td’).filter(function() {
return $(this).text() == ‘Active’;
}).closest(‘tr’).css(‘background-color’, ‘yellow’);

}

Hope it helps!

Ask your Query : Click here

Note: It is unsupported way and may break in future if Microsoft changes rendering of sub-grids in a future release.
Trying to Learn Dynamics CRM: Download!


Learn Dynamics CRM App on Google Play store

21 thoughts on “Adding Row Colours to CRM 2013 Sub-Grids dynamically based on value in cells”

  1. Have you tried this in CRM 2013 SP1 UR1? I never get past “if(grid[0] == undefined)”. grid is defined but never grid[0].

    The subgrid on the form is populated though. grid has a context and a selector and the length is zero.

    I’m actually trying to replace the old fetchXml code which used SetParameter that doesn’t work now. So, the jquery object gives me another avenue to try to figure it out.

    Thanks!

    Reply

  4. Hi Deepesh,
    I have to implement the same functionality on CRM 2015 Dashboard. Could yo uhelp please. As far as I understnad you cant add the script directly to dashboard
    mathew

    Reply

      • Has anyone gotten this to work with online CRM 2016? Can’t seem to find any other solutions like this one.

      • Hi Rodney,

        This is unsupported approach and needs to change with each version. A better supported approach is to develop a custom grid.
        I will add it in a post soon.
        Thanks and Regards,
        Deepesh

    • Hi Rodney,

      This is unsupported approach and needs to change with each version. A better supported approach is to develop a custom grid.
      I will add it in a post soon.
      Thanks and Regards,
      Deepesh

      Reply

      • Hi Deepesh,

        here’s my snippet.. I have row colours or a picture in my script, dependent on the name of the form. I’m sure it could be more tidy, but i works.!!

        And it works with the new rendering engine..

        function subGridOnload() {
        var grid = Xrm.Page.getControl(‘Potentialer’).getGrid();
        if (grid == null) {
        setTimeout(function () { subGridOnload(); }, 100);
        }
        var totalCount = grid.getTotalRecordCount();
        if (typeof totalCount == “number” && totalCount == -1) {
        setTimeout(subGridOnload, 100, ‘Potentialer’);
        return;
        } else if (totalCount > 0) {
        setTimeout(function() {
        var formLabel;
        var currForm = Xrm.Page.ui.formSelector.getCurrentItem();
        formLabel = currForm.getLabel();
        if (formLabel == “Oplysninger FLEET”) {
        $(“#Potentialer td”).filter(function() {
        return $(this).text() == “rungreen”;
        }).html(“”);
        $(“#Potentialer td”).filter(function() {
        return $(this).text() == “runyellow”;
        }).html(“”);
        $(“#Potentialer td”).filter(function() {
        return $(this).text() == “runred”;
        }).html(“”);
        } else {
        $(“#Potentialer td”).filter(function() {
        return $(this).text() == “rungreen”;
        }).closest(“tr”).css(“background-color”, “rgb(196, 215, 155)”);
        $(“#Potentialer td”).filter(function() {
        return $(this).text() == “runyellow”;
        }).closest(“tr”).css(“background-color”, “#FAF5B6”);
        $(“#Potentialer td”).filter(function() {
        return $(this).text() == “runred”;
        }).closest(“tr”).css({“color”: “#B80000”, “font-weight”: “120”});
        };
        var filteredRecordCount = Xrm.Page.getControl(‘Potentialer’).getGrid().getTotalRecordCount();
        Xrm.Page.data.entity.attributes.get(“new_antal”).setValue(filteredRecordCount);
        }, 50);
        }
        }

Leave a comment