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. |
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
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
{ 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
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:
console.log( this.grid.model.getDatum( inRowIndex, 1 ) );
return ' ' + inRowIndex;
}
Use this.grid.model.isRowLoaded( inRowIndex ) to check when data has been loaded.