Styles

Cell Styles

Fixed styles that apply to all cells of a column are settable in the view. The properties you need:

• classes: sets a CSS class for both header and contents
• styles: sets a CSS style for both header and contents
• headerClasses: sets a CSS class for column header. Combines with "classes".
• headerStyles: sets a CSS style for column header. Combines with "styles"
• cellClasses: sets a CSS class for the contents. Combines with "classes".
• cellClasses: sets a CSS class for the contents. Combines with "styles"

The onStyleRow Extension Point

The above properties make sweeping style changes across a column. But how do you change styles for individual cells? For example, suppose you want to color negative numbers red and positive numbers black.

The onStyleRow extension point can do this. Grid passes a Row object to your onStyleRow method. You set the properties customStyles and/or customClasses in this object, and Grid will restyle your row accordingly. The Row object has the following properties:

• selected, true if the row is selected;
• over: true of the mouse is over the row;
• odd: true if the row is odd.
• customClasses: you set this property for the CSS class
• customStyles: does the same with CSS styles

In the following example, we look at each row and color the row text red if the Dijit contains a description.

function colorDescriptions(inRow) {
   if (model.getRow(inRow.index) === undefined)
      return;
   if (model.getRow(inRow.index).description != '')
      inRow.customStyles = 'color:red';
}

You connect this function to the extension point in the Grid tag:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

And behold ... red text where the row has a non-blank description

[inline:grid_demo4.png]

Cell Formatters

A cell formatter alters the text in the cell, not the styles. As you might guess, this is useful for formatting numbers, currency, dates, percentages, etc. The cell formatter is specified with the formatter extension point in the cell object:

{ name: 'Amount', formatter: formatCurrency, field: "moola"},

And define the formatter itself separately. (You can also use a function literal inside the cell definition).

function formatCurrency(inDatum){
	return isNaN(inDatum) ? '...' : dojo.currency.format(inDatum, { currency: 'USD' });
}

Liberal use of Dojo i18n for formatting dates and numbers is strongly encouraged!