This article takes you through the steps to add your own customised script to highlight columns or rows of grid without using FilterWhere.

Let's take an example of search company records.

1. To start with, add a custom field in Company. For this, Go to Administration > Customization> Company. I have created 'set up date' field as shown below:

2. Then Go to ‘Screens’ tab and add the field to ‘CompanyBoxLong’ Screen.

3. Then go to the ‘Lists’ tab and add the field to ‘ComapnyGrid’ list

4. Now if you add the value in Company Entry Screen then you will be able to see the records like this:

5. There are few things that I want to bring into your notice. In CRM, if you display any date fields and value contains is of today and tomorrow’s date. Then it shows ‘Today’ and ‘Tomorrow’ instead of ‘dd/mm/yyyy’ date format.

And if you try to use fiterwhere to override this behavior it will not work for any of the records. Because FilterWhere recognize 'Today' and 'Tomorrow' as String rather date.

6. To overcome this, I created a custom script. Add this script in to ‘Custom Content’ box of ‘CompanyGrid’ List

<script>

        var obj = {

            color: "white", "background-color": "red", 'box-shadow': "red",

            '-webkit-box-shadow': "red", '-moz-box-shadow': "red", opacity: 1

        };

        crm.grids().rows().cells().highlightCell(obj);

        var todayDate = new Date();

        var till30Days = new Date();

        till30Days.setDate(todayDate.getDate() + 30);

        crm.ready(function () {

            crm.grids().rows().column('comp_setupdate').exec(function (index, currentCell) {

                var cellHtml = $(currentCell).html();

                if (cellHtml.includes("Today") || cellHtml.includes("Tomorrow")) {

                    $(currentCell).css('background-color', 'greenyellow');

                }

                else {

                    var aTag = cellHtml.match(/<a [^>]+>([^<]+)<\/a>/)[1];

                    var splitVal = aTag.split("/");

                    var currentDate = new Date(splitVal[1] + "/" + splitVal[0] + "/" + splitVal[2]);

                    if (currentDate >= todayDate && currentDate <= till30Days) {

                        $(currentCell).css('background-color', 'greenyellow');

                    }

                }

            });

        });

    </script>

In this Script, I have declared one parameter that contains all the css parameters that we want. Here I’m highlighting only those fields that contains value from today’s date to next 30 days.

So I have set two parameters that are defining date values. Then by using crm grid rows I have picked the desired column’s html and separated the date value and then matched it with my criteria.

If you place this script and try to find the records. You will get this:

 

In this way, anytime, you can change the criteria and continue using this script.