October 10, 2013  

Dojo Data Grid – Part 28: Overriding Grid CSS

In the last post, I showed how to modify the look and feel of a Dojo Data Grid in XPages by selecting a different dojo theme. In this post, I’ll show how to further customize the UI by adding your own CSS.

Dojo Data Grid Series

Dojo Grids in XPages — All Blog Posts

Default Style

Here’s what the grid looks like by default:

Grid 28 - A

Grid Classes to Target

In order to figure out how to override the styling, we need to understand more about the structure of the grid on the page.

There are a lot of divs and tables that get generated when a grid is rendered. There’s a parent grid div, header and view divs, scrollbox and content divs, and then each grid row is a div and table.

Here’s a list of elements that it uses from the start of the grid down to the first data cell:


div.dojoxGrid > div.dojoxGridMasterView > div.dojoxGridView > div.dojoxGridScrollbox > div.dojoxGridContent > div[role="presentation"] > div.dojoxGridRow > table.dojoxGridRowTable > tbody > tr > td.dojoxGridCell

Every other div.dojoxGridRow also gets the dojoxGridRowOdd class as well.

Font and Row Color

Fortunately, we don’t need to go through all of that to find the classes that we need to customize.

You can change the row color and font by targeting .dojoxGridRow tr

/* Grid Row - Default Styles */
.dojoxGridRow tr {
  background-color: #2F4F4F;
  color: #FFFFFF;
  font-size: 14px;
}

Fixing Header/Cell Alignment with Column Widths

Once you start changing default fonts (or padding), it throws off the alignment of the column headers to the column data.

Grid 28 - B

The simplest way to fix this is to define the width of each grid column explicitly in the grid column properties. This ensures that the header and cell line up.

Grid 28 - C

Alternate Row Color

You can also change the alternate row color and font by targeting .dojoxGridRowOdd tr

/* Grid Row -- Alternate Row Background Color*/
.dojoxGridRowOdd tr {
  background-color: #778899;
}

Row Hover

It’s a little trickier, but you can also override the row hover styles. In this case, I’m changing the background color, text color, and font size.

/* Grid Row - Hover Styles */
.dojoxGridRow tr:hover td {
  background-color: white !important;
  color: #2F4F4F !important;
  font-size: 18px;
}

Grid 28 - D

Header

You can also modify the style of the column header cells. You have to target both the header cell and the div contained within the header cell in order to fully change the background color, which uses an image by default.

/* Grid Header - Styles */
.dojoxGridHeader .dojoxGridCell {
  background-image: none !important;
  background-color: #777777 !important;
}

.dojoxGridHeader .dojoxGridCell div {
  color: white;
  font-size: 12px;
}

7 responses to “Dojo Data Grid – Part 28: Overriding Grid CSS”

  1. vidya says :

    I want change row color dynamically based on some condition (ex after applying filter ). Please let me know how to do that

    Reply
    • Brad Balassaitis says :

      Take a look at the onstylerow event of the grid. I’m sure there’s a way to use it to check whether a filter is enabled and change the row color.

      I have some examples of using the event in posts #9 and 12 on dojo grids. Take a look at the dojo data grid series page (link at the top).

      Reply
  2. Steve Zavocki says :

    Just in case anybody runs into this issue, if you try to use ’em’ as column width, the column titles are still not lined up with the data column. This is even true, if you make the font size the same in the CSS. If you use pixels, then it works. (I usually use ems since they are a relative to screen size)

    Reply
  3. Csaba Kiss says :

    My first column in the grid is a combination of two columns from a view, I would like to have the header show the two column titles in two different colors like this Column 1 Column 2
    I am not sure how to enter html in the column headers. Any tips?

    Reply
  4. Csaba Kiss says :

    Arggh, WordPress removed the html code from my post My header should be *font color=red* Column 1 */font* Column 2
    I am sure you can imagine the html code

    Reply
    • Brad Balassaitis says :

      If you’re using the extension library controls, there doesn’t seem to be a way to do it.

      If you’re creating all of the grid code yourself and defining it declaratively, this StackOverflow post has an answer that shows how to add styling: http://stackoverflow.com/questions/11541815/how-to-declaratively-right-align-a-column-in-a-dojo-datagrid

      Otherwise, you could write code to modify it programmatically after the grid loads or use CSS to target the column header by its position in the grid and change the style.

      For example, to change only the second column header, you could use a rule like this in a style sheet:

      .dojoxGridHeader .dojoxGridCell:nth-child(2) div {color: red;}

      However, that would modify the second column header in every grid, so you could put a class on the grid itself and update the CSS rule to target that class:

      .myGrid .dojoxGridHeader .dojoxGridCell:nth-child(2) div {color: red;}

      Feels like a bit of a brute force approach, but it’ll do the job.

      Reply

Leave a comment