Cell Editing
Up until now, we've showed grid contents in view mode. Now, let's add some interactivity.
An editable cell is handled by a cell editor. To make a cell editable, you simply specify the cell editor class in the column definition. Here is a part of the view definition code in /dojoroot/dojox/grid/tests/test_edit.html.
gridLayout = [ cells: [[ { name: 'Priority', styles: 'text-align: center;', editor: dojox.grid.editors.select, options: ["normal", "note", "important"] }, { name: 'Mark', width: 3, styles: 'text-align: center;', editor: dojox.grid.editors.bool }, { field: 2, name: 'Status', styles: 'text-align: center;', editor: dojox.grid.editors.select, options: [ "new", "read", "replied" ] }
In the actual grid, you double-click on a cell to begin editing. Here, we've double clicked on the status box, and a SELECT appears in place of the data:

Some of the cell editors, like dojox.grid.editors.DateTextBox are just wrappers for their Dijit form widget counterparts. All the functionality and properties are available to you. This is an example from /dojoroot/dojox/grid/tests/test_edit_dijit.html.
gridLayout = { cells: [[ { name: 'Date', width: 10, field: 7, editor: dojox.grid.editors.DateTextBox, formatter: formatDate, constraint: {formatLength: 'long', selector: "date"} } ]] };
Editing the Date cell brings up the familiar Dijit date box:

Now, what do you actually do with an edited cell? That's really up to you, and you hook in your desired code by connecting to an event, which we'll cover next.
Available Cell Editors
Cell Editor Class | Attributes |
dojox.grid.editors.CheckBox | See dijit.form.CheckBox |
dojox.grid.editors.ComboBox | See dijit.form.ComboBox |
dojox.grid.editors.DateTextBox | See dijit.form.DateTextBox |
dojox.grid.editors.Editor | See dijit.Editor |
dojox.grid.editors.select | Similar to dojox.grid.editors.ComboBox, but doesn't allow freeform values String[] options: text of each item String[] values: value for each item Boolean returnIndex: editor returns only the index of the selected option and not the value |
dojox.grid.editors.TextBox | See dijit.form.TextBox |
dojox.grid.editors.TimeTextBox | See dijit.form.TimeTextBox |
Attachment | Size |
---|---|
grid5.html | 2.72 KB |