Login Register

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:

<div id="grid" elasticView="2" dojoType="dojox.Grid" model="model"
            structure="layout" onStyleRow="colorDescriptions">
</div>

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

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!

AttachmentSize
grid4.html2.32 KB

cellStyles example

Here's an example of how to set a style for cells:

// a grid view is a group of columns
var view1 = {
        cells: [[
                {name: 'Namespace', field: "namespace", cellStyles: "text-align: right;"},
                {name: 'Class', width: "25em", field: "className"}
          ],
          [
                {name: 'Summary', colSpan:"2", field: "summary"}
          ]
        ]
};

cellStyles typo

There's a glitch in the documentation for the cellStyles property (6th bullet point under the cell Styles heading). It should read:

# cellStyles: sets a CSS style for the contents. Combines with "styles"

Connect to onStyleRow

The onStyleRow example on this page overrides the default implementation for setting styles and classes. If you want to extend the default behaviour, connect to that function:

<div
  id="grid" elasticView="2"
  dojoType="dojox.Grid"
  model="model"
  structure="layout">

  <script type="dojo/connect" event="onStyleRow" args="inRow">
    if( inRow.over ) inRow.customStyles = 'color:red';
  </script>
</div>

Highlight grid rows according to store attribute values

Here's a bit more complicated example (that corresponds to highlighting nodes of a tree widget according to store attributes). The idea is to change the grid row background color based on a store attribute value. In many cases the value could be read from the model using this.model.getDatum( inRow.index, 0 ), but if your grid columns are only a subset of the store attributes, you need something more complicated:

<span dojoType="dojox.grid.data.DojoData"
    jsId="model"
    rowsPerPage="20"
    store="store"
    query="{ name : '*' }"
    >

    <script type="dojo/method" event="getItem" args="rowIdx">
        var row = this.getRow(rowIdx);
        return row ? row.__dojo_data_item : null;
    </script>
</span>

<div id="grid"
    jsId="grid"
    dojoType="dojox.Grid"
    elasticView="0"
    model="model"
    structure="structure">

    <script type="dojo/connect" event="onStyleRow" args="inRow">
        // depending on store values
        var item = this.model.getItem( inRow.index );
        if( item && this.model.store.getValue( item, 'running' ) )
            inRow.customStyles += ' background-color: #FFB93F; ';
    </script>
</div>

Try changing the store values and see grid rows getting highlighted.

getItem / rowIdx programmatically

I'm using Maine's example above (thank you) to color some of my rows depending on values. I however use the following code to periodically refresh my grid.

var response = eval("("+response+")");
var store = new dojo.data.ItemFileWriteStore({url: "js/store/jobs.json" });
var gridModel = new dojox.grid.data.DojoData(null, store, {query: {name: '*'}, clientSort:true});
// Need to recreate a getItem method in here like I do out in the markup
jobGrid.setModel(gridModel);
jobGrid.refresh();

and when I do, the grid never gets re-rendered and errors with this.model.getItem isn't a function. This is because I switch to a model that doesn't have a defined dojo/method as the one in the markup does.

I was trying to do the same with dojo.connect in the javascript (at the commented line above) but wasn't sure how to access the rowIdx argument in the callback function.

Any help would be much appreciated.

Extending DojoData programmatically

DojoData constructor mixes into itself the third parameter. Just add any extensions there, like:

var gridModel = new dojox.grid.data.DojoData(null, store,
  {
    query: {name: '*'},
    clientSort:true,
    getItem: function(rowIdx) {
      var row = this.getRow(rowIdx);
      return row ? row.__dojo_data_item : null;
    }
  }
);

Thanks

That's exactly what I needed. Thank you.