EasyUI
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. |