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:

[inline:gredit_edit1.png]

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:

[inline:gredit_edit2.png]

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