The new dgrid is a powerful, but lightweight grid component. It is specifically built to be easily styled with CSS, rather than relying on programmatic properties and changes. The dgrid makes numerous element classes available to reference from CSS and avoids inline styles as much as possible to ensure ease of CSS customization.

Stylesheet Loading Order

Before diving into CSS styling of the dgrid, it is highly recommended that you start your dgrid styling stylesheet with an import (or a link) of dgrid.css (and any other dgrid stylesheets you will use). This will ensure that dgrid.css is loaded before your rules so that your rules can override those in dgrid.css without requiring higher specificity. The dgrid component will load dgrid.css if it hasn’t already been loaded by you, but this will usually cause dgrid.css to load after other stylesheets, and therefore take precedence over other stylesheets.

@import "dgrid/css/dgrid.css";

Cell Styling

The most likely part of the dgrid that you will want to style is the cells or columns. Rather than defining column widths or anything else, we use CSS to style the columns. The dgrid provides two key column-specific classes that we can reference. The first class is the .dgrid-column-
. With this class we use the column id, which is the property name of the column in your columns object. If you provided an object, each property name is the column id, and if you used an array, the column index is the column id. If we wanted to define the “name” column as a having a width of 20em, we could write:

.dgrid-column-name {
   width: 20em;
}

Note that we didn’t specify any context for the class, so this would apply to all grids (with a “name” column). If we wanted to target a specific grid, we could write the selector more specifically:

#my-grid .dgrid-column-name {
   width: 20em;
}

We could also use the .field- which is always based on the field from the data that is being rendered in the grid. Assuming that our column is rendered based on the “name” property, we could write:

.field-name {
   width: 20em;
}

Since browsers also allow tables to be defined with auto widths, percentage widths, ems, and pixels, we can use any of these units. In fact we can even mix units between columns to allow for highly adaptable grid layouts:

.dgrid { /* this grid itself */
   width: 50%;  /* the grid will be 50% of the surrounding page or element */
}
.dgrid-column-name {
   width: 200px; /* this column will use 200px */
}
.dgrid-column-name {
   width: auto; /*  this column will use whatever space remains (this is the default, so doesn't really need to be specified)*/
}

Naturally we can apply any other CSS property to the column as well. We could define the text color, background color, font weight, etc.:

.dgrid-column-name {
   background-color: blue;
   color: red;
   font-weight: bold;
}

We could also apply styling to all the cells, using the .dgrid-cell class. This also makes it easy to define default styles that could be overriden for specific columns:

.dgrid-cell {
   width: 80px; /* make all the columns 80px wide*/
}

.dgrid-column-name {
   width: 50px; /* except the name column should be 50px wide*/
}

One particular CSS property that requires extra caution is the padding property. Older versions of IE require dgrid to employ nested elements to properly pad and normalize cross-browser column sizing. If you want to alter the padding (which defaults to 3px), make to sure use the dgrid-cell-padding class (which can be the same or nested inside the cell):

.dgrid-cell-padding {
   padding: 5px;
}

Auto Height

For small data sets, sometimes it is preferable to have the grid’s height be based on the size of rows rather than a fixed sized grid. In this auto-height configuration, we show the entire data set and forego scroll bars. Enabling auto-height just requires a few simple CSS properties/rules:

.dgrid {
	height: auto;
}
.dgrid .dgrid-scroller {
	position: relative;
	overflow: visible;
}

We can also apply a maximum height to our grid in combination with auto-height. This will allow the grid to adjust to the size of the data until a certain height is reached, and then scrolling will be used. We can do this by adding a max-height property to the .dgrid-scroller rule. We should also remove the overflow: visible or replace it with overflow: auto so that scrollbars are still available when the content exceeds the maximum height of the grid:

.dgrid .dgrid-scroller {
	position: relative;
	max-height: 200px;
	overflow: auto;
}

Note that overflow: auto won’t properly adapt column widths correctly in the case of grids without scrollbars in IE7 or earlier. For IE7 or earlier you should remove the overflow property (allow it to inherit the overflow: scroll). Also setting max-height won’t work with IE in quirks mode, make sure your document is not in quirks mode.

Fixed Row Height

For consistency, often it is desirable to keep row heights constant rather than letting them be vertically sized to show all the contents of each cell (the default behavior). When cells may contain large chunks of text, rows can take become rather tall. We can force a fixed height on the rows by setting the row height with CSS:

.dgrid-row {
	height: 22px;
}

And we need to combine fixed row heights with non-wrapping ellipsis styling to show ellipsis for text that extends beyond the visible range of the cell. We can use ellipsis for our cells with:

.dgrid-cell {
	text-overflow: ellipsis;
	white-space: nowrap;
}

(note that this isn’t quite universally supported by browsers, but with Firefox 7.0’s recent support for this, it is rapidly approaching universally supported.)

Alternating Rows

Another visual effect that can make it easier for users to scan and read data in a grid is to use alternating row colors. The dgrid provides .dgrid-row-even and .dgrid-row-odd classes to easily apply distinct alternating CSS styling. Here we could apply a background to odd rows to give an alternating background color effect:

.dgrid-row-odd {
	background: #F2F5F9;
}

With alternating colors to help aid visual discernment of rows, it is also very reasonable to eliminate cell borders for a “cleaner” look:

.dgrid-cell {
	border: none;
}

Selection and Focus

The dgrid also includes classes for styling the selected rows or cells and focused rows or cells.

.dgrid-selected {
	background: #999; /* Make selected rows be gray */
}

The documentation for the dgrid lists all the other classes used, which can be referenced from your CSS.