Grid Formatting In Dynamics CRM 2016

After searching a lot about grid formatting in Microsoft Dynamics CRM 2016 I came to know that there are no supported way to make it as per our requirement. The reason behind changing look and feel was to make grid more readable, existing one has complete white color background which makes difficult to visualize and relate adjacent records if there are so many columns and rows.

However inspired by   Bohnnie Maity blog on conditional formatting for CRM 2013 sp1/2015 grids using actions, I have made changes in code to make grid little attractive.

This is the standard grid available in Dynamics CRM 2015/2016

Standard grid in Dynamics CRM – 2015/2016

After modification of CSS through Java Script, Grid looks like below images with Gray & Orange color for each alternative rows,

Gray colored grid – alternative rows
Orange colored grid – alternative rows

Above grid looks more attractive and easy to analyze the records in associated rows.

For achieving this output use following java script code,





12 thoughts on “Grid Formatting In Dynamics CRM 2016

  1. Mandar May 28, 2016 / 9:50 am

    Great info buddy


  2. Gouja May 28, 2016 / 7:53 pm

    gridbodyTable is the name of grid ? and contentIframe0 is the name of what ??


    • Pramod Dhokane May 29, 2016 / 12:39 pm

      “gridBodyTable” is the id of gird with out headers in this table, and “contentIframe0” is the id of content panel where grid is rendered with headers and view selector. If you want to know more about this then just Inspect the complete web page ( F12 Debugger Tool)


  3. Fed June 25, 2016 / 12:27 am

    This looks great Pramod!

    I would want to modify your script to color just one field in the grid based on certain conditions. My question is: Where do you place this javascript function? How will it get triggered? Thanks


    • Pramod Dhokane June 25, 2016 / 9:50 am

      Using Ribbon Workbench tool create hidden button on cmd bar, and load this Java script as web resource


      • Fed June 27, 2016 / 8:29 pm

        Thanks for your reply. Currently I have it set up to be triggered as an action (just like in Bohnnie’s blog), however the FormatGrid gets triggered twice, so I will have to look into the hidden button solution.

        Is there any reason why you’re looping throw the cells of each row instead of coloring the whole row ?
        Instead of the for loop inside the if statement why not have just this: rows[i].style.backgroundColor = “#F1F1F1”;



      • Pramod Dhokane June 28, 2016 / 8:11 am

        Actually my plan was different then this, I was suppose to color every cell with different background color. For ex. Primary field with red background and rest in different color. Anyways thanks for your suggestions


  4. Artem October 24, 2016 / 6:01 pm

    This looks great Pramod!
    I have created a button through the ribbon and made it invisible, but I can not run when you open JS vish page
    Help me pls!


    • Pramod Dhokane October 24, 2016 / 6:20 pm

      enable rule on that button and call that java script function located inside java script web resource – use ribbon workbench for easiness


      • Artem October 24, 2016 / 7:12 pm

        I use ribbon workbench and create a button on the home area in the ribbon.
        Pressing the button starts the appropriate script to me.
        I created Enabled rule is Solution Elements area which also launches my script when the page opens with the customer, but it does not work on the list


  5. dynamicspeople December 7, 2016 / 1:11 pm

    Nice blog.

    I want to change the only header of grid. How I can do this. Please help me out.


    • Pramod Dhokane December 7, 2016 / 3:39 pm

      You can debug the HTML page and try to identify header component for required column.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s