Cell Editing in DataGrid

Extension » Cell Editing in DataGrid

Include 'datagrid-cellediting.js' file

Enable Cell Editing

Properties

The properties extend from datagrid, below is the added properties for datagrid.

Name Type Description Default
clickToEdit boolean True to edit the cell when click on this cell. true
dblclickToEdit boolean True to edit the cell when double click on this cell. false

Events

The events extend from datagrid, below is the added events for datagrid.

Name Parameters Description
onBeforeCellEdit index,field Fires before editing a cell, return false to deny the editing action.
onCellEdit index,field,value Fires when a cell is editing. The parameters contain:
index: The editing row index.
field: The column field name.
value: The initialized value from the pressed char code on keyboard. When pressing DEL or BACKSPACE keys, this value is an empty string.
onSelectCell index,field Fires when select a cell.
onUnselectCell index,field Fires when unselect a cell.

Methods

The methods below extend from datagrid.

Name Parameter Description
editCell param Edit a cell. The 'param' parameter contains the following properties:
index: the row index.
field: the field name.

Code example:

$('#dg').datagrid('editCell', {
	index: 0,
	field: 'productid'
});
isEditing index Return true if the special row is editing.
gotoCell param Navigate the highlighted cell. The possible parameter values are: 'up','down','left','right',or an object with 'index' and 'field' properties.

Code example:

$('#dg').datagrid('gotoCell', 'down');
$('#dg').datagrid('gotoCell', {
	index: 0,
	field: 'productid'
});
enableCellSelecting none Enable cell selecting in a datagrid.
disableCellSelecting none Disable cell selecting in a datagrid.
enableCellEditing none Enable cell editing in a datagrid.
disableCellEditing none Disable cell editing in a datagrid.
input param Return the current editing box object.

Code example:

var input = $('#dg').datagrid('input', {
	index: 0,
	field: 'productid'
});
if (input){
	//...
}
cell none Return the current cell information that contains 'index' and 'field' properties.
getSelectedCells none Return all the selected cells.

Download the EasyUI Extension:

datagrid-cellediting.zip