How to color Code a grid in CRM 2011

The following code will color code the grid based on a field; I am using a field to set the value of an incoming email. The value of the field “Unread” is checked to set the color of the record to red every time a new email arrives it updates the field on the record which in turn turns the record red.

function ColorGridByNewEmail() {

   //debugger;

    var indexPriority = 0;

   // var indexSRStatus = 0;

    var iColumns = 0;

 

    if (window.document.getElementById('gridBodyTable') != null) {

        var gridBar = window.document.getElementById('gridBodyTable');

        if (gridBar != null && gridBar != "undefined") {

            var headers = gridBar.getElementsByTagName('TH');

            //Total no. of columns in the view

            iColumns = headers.length;

            for (var iL = 0; iL < headers.length; iL++) {

                var header = headers[iL];

                switch (header.innerText) {

                    case "Email":

                        indexPriority = iL;

                        break;

                    default:

                        break;

                }

            }

        }

        if (indexPriority != 0) {

            //Get the Grid records

            var oItems = window.document.getElementById('gridBodyTable');

            _iTotalRecords = oItems.rows.length - 1;

            oItems.rows[0].style.display = 'none';

            for (var i = 1; i < oItems.rows.length; i++) {

                var cellPriority = oItems.rows[i].cells[indexPriority];

                //var cellSRStatus = oItems.rows[i].cells[indexSRStatus];

                if (cellPriority != null) {

                    //Case Status = Unassigned, Response Received, and Change Request

                    //Make the grid row "RED" color

                    if (cellPriority.innerText == "Unread") {

                        oItems.rows[i].style.color = 'red';

                        for (var iHeadLoop = 0; iHeadLoop < iColumns; iHeadLoop++) {

                            if (oItems.rows[i].cells[iHeadLoop].children[0] != null && oItems.rows[i].cells[iHeadLoop].children[0] != 'undefined' && oItems.rows[i].cells[iHeadLoop].children[0] != undefined) {

                                if (oItems.rows[i].cells[iHeadLoop].children[0].children[0] != null && oItems.rows[i].cells[iHeadLoop].children[0].children[0] != 'undefined' && oItems.rows[i].cells[iHeadLoop].children[0].children[0] != undefined) {

                                    if (oItems.rows[i].cells[iHeadLoop].children[0].children[0].children[0] != null && oItems.rows[i].cells[iHeadLoop].children[0].children[0].children[0] != 'undefined' && oItems.rows[i].cells[iHeadLoop].children[0].children[0].children[0] != undefined) {

                                        if (oItems.rows[i].cells[iHeadLoop].children[0].children[0].children[0].children[0] != null && oItems.rows[i].cells[iHeadLoop].children[0].children[0].children[0].children[0] != 'undefined' && oItems.rows[i].cells[iHeadLoop].children[0].children[0].children[0].children[0] != undefined) {

                                            oItems.rows[i].cells[iHeadLoop].children[0].children[0].children[0].children[0].style.color = 'red';

                                        }

                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

 

    }

}

 

This piece of code is called by an enable/disable rule of a button placed on the ribbon “colorcode” as shown in the image below. Also we need to place the field based on which this color coding has to be done on all the views where we need to show the color coding

I am using a visual ribbon editor to call the “ColorGridByNewEmail” function on an enable/disable rule as shown in the image below.Please change the library name as per your own web resource where you place the “ColorGridByNewEmail” function.