Login Register

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:

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:

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
AttachmentSize
grid5.html2.72 KB