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

1
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,

3
Gray colored grid – alternative rows
2
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,

4

 

 

Advertisements

12 thoughts on “Grid Formatting In Dynamics CRM 2016

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

    Great info buddy

    Like

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

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

    Like

    • 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)

      Like

  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

    Like

    • 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

      Like

      • 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”;

        Thanks

        Like

      • 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

        Like

  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!

    Like

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

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

      Like

      • 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

        Like

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

    Hi,
    Nice blog.

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

    Like

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

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

      Like

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s