Cell Editing

The cell editing is one of the options you can use inside guiGrid configuration. It allows you to change the cell values directly from the grid. To activate cell edit mode from the grid viewpoint, just click on one of the cells. Now you can change the value by typing in a new value. Moreover, you can cancel the change by pressing the escape key on your keyboard.

To enable this feature you have to add cellEditing: true to the guiGrid jQuery function just like in the 'cell-editing-grid.js' example.

Generic UI Grid for jQuery gives the ability to subscribe to one of the cell editing listeners. The can provide the information when a user actives the cell edit mode, submits the change or cancels it. It is extremely useful in situations where you want to do something with the cell value, e.g send it to the server.

Cell Editing Example
	columns: [{
		header: 'Number',
		field: 'number',
		width: 60
	}, {
		header: 'Name',
		field: 'name',
		view: 'italic'
	}, {
		header: 'Position',
		field: 'position',
		view: 'bold'
	}, {
		header: 'Team',
		field: 'team'
	cellEditing: 'true',
	maxHeight: 300,
	source: source

Cell editing - options

cellEditing booleanfalse Turns on cell editing.

Cell Editing - events

Event nameTypeDescription
onSourceEdit number When source changes, grid emits value of previous and new values: { after: any, before: any }.
onCellEditEnter number When user double clicks on the cell it will go into edit mode and this output will emit event.
onCellEditCancel number When user cancels edit mode, this output will emit event.
onCellEditSubmit number When user submits change of the edited value, this output will emit event.

Related articles: