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
- Subscribe 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.
Get/formatter functions should return HTML string, not DOM node
If you use cell's get or formatter functions, i.e. the functions that can you use to serve and style cell's content, to create some HTML, you should prepare it as a string, not as a DOM node. In other words,
return '<b>content</b>'is ok, whilereturn dojo.byId('myNode')isn't.The source of cell's format function that calls both get and formatter if they exist:
// summary:
// provides the html for a given grid cell.
// inRowIndex: int
// grid row index
// returns: html for a given grid cell
var f, i=this.grid.edit.info, d=this.get ? this.get(inRowIndex) : this.value;
if(this.editor && (this.editor.alwaysOn || (i.rowIndex==inRowIndex && i.cell==this))){
return this.editor.format(d, inRowIndex);
}else{
return (f = this.formatter) ? f.call(this, d, inRowIndex) : d;
}
},
However, if you really need access the DOM node of the cell, there's a (hacky) way to get around the string-only limitation. Have a look at dijitEditors.js and the needFormatNode function in editors.js.
editor formatting (css)
I have a grid, using an inline editor.
When i double click a cell to edit it's value, the editor is shown correctly
if I move the mouse over the editor then the editor is drawn white on white (background color equals to text color) so i can't see the value to edit.
It is correctly drawn when the mouse isn't over the editor.
i resolved using this css
.dijitTextBox input, .dijitComboBox input, .dijitSpinner input {
background-color: WHITE !important;
color: BLACK !important;
}
hope this help someone
[dojo 1.1.1]
Thanks for this post!
It helped me a lot, to get all the properties of a cell nicely listed! :-)