Login Register

Cell Options

Grid neatly separates the model from the view in its MVC implementation. We just covered the model. Now we'll cover the view - that is, everything used to display the model elements.

In the world of Grid, the structure is the largest unit. Structures are composed of views. Views are composed of cells (what we normally think of as a column). We'll start at this lowest level first. As we've seen a cell is defined by a JavaScript object like this:

{ name: 'Apple', field: 'apple', width: '4.5em' }

This defines a column with the heading of Apple and initial width of 4.5em, and mapped to the field 'apple' in the model. The field index can be a string, as is the case for dojo.Data-fed grids, or a number, as in array-fed Grids.

Cells themselves are not directly addressable. You usually get them by starting with a grid variable and work downwards:

// get the cell in the third view, second subrow, fourth column (all indexes are 0-based).
var thisCell = mygrid.structure[2].cells[1][3];

From here, you can access these properties and call these methods on thisCell:

Attributes
cellClasses String CSS class applied to data
cellStyles String CSS Styles applied to data
classes String CSS Classes applied to all column: data and header
colSpan Integer Like colspan in HTML, number of columns each cell occupies. Only meaningful if there are subrows in each row, otherwise ignored.
editor Class For editable cells, this can be either "dojox.grid.editors.Dijit" for a Dijit form control or "dojox.grid.editors.Editor" for the rich text editor. (The rich text editoris essentially Dijit's with some modifications to make it nicer in a grid - like a shared toolbar.) Grid also bundles its own editors like dojox.grid.editors.bool for Booleans, but they are redundant with the Dijit widgets.
editorClass String If editor="dojox.grid.editors.Dijit", this designates the Dijit form widget to use. Note: this is a string with the class name, not the class itself.
extraField Integer Index field like "field", but tacked on
field Integer Index of field data in from model
headerClasses String CSS class applied to column header
headerStyles String CSS Styles applied to column header
name String Name used for the column header
noresize Boolean If true, column cannot be resized.
rowSpan Integer Number of subrows that each cell in this column occupies.
styles String CSS styles applied to all column: data and header
value String Constant value to placed in each column cell. Can contain HTML.
width Number Initial width of the column in ems
Extension Points
formatter(/* String */ inDatum) Function which handles formatting the cell data.
get(/* Integer */ inRowIndex) Name of the function called to get a value.

Width 'auto' and grid.elasticView

Note: If your layout consists of several views, you can set width: 'auto' for cells in only one view. That view has to be defined in the grid using elasticView-attribute. For example, in dojox.Grid using Dojo.Data:

Layout with three views

var layout2 = [
    { type: 'dojox.GridRowView', width: '20px' },
    { cells: [[{ name: "Row", get: getRow, width: 5}]], noscroll: true},
    { cells: [[
        { name: "Title", field: 0 },
        { name: "Year", field: 1, width: 20 },
        { name: "Producer", field: 2, width: 'auto' }
    ]]}
];

Grid widget with elasticView set to the third view

<div jsId="grid" dojoType="dojox.Grid" elasticView="2" structure="layout2"></div>

Get with DojoData-model

Note: When grid uses DojoData-model, its content gets rendered three times. Consequently, get-function on every row gets called three times: on two first times the data hasn't loaded yet (you get '?' and '...'), only on the third time you get correct values from the model. You can see this in dojox.Grid using Dojo.Data stores via simple binding, if you add the following logging into getRow-function:

function getRow(inRowIndex){
  console.log( this.grid.model.getDatum( inRowIndex, 1 ) );
  return ' ' + inRowIndex;
}

Use this.grid.model.isRowLoaded( inRowIndex ) to check when data has been loaded.