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.

$('#jquery-cell-editing-grid').guiGrid({
	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
});