Editable DataGrid
Extension » Editable DataGrid
Usage Example
Create datagrid in html tag
Make it editable
Now you can double click the datagrid row to begin edit operation. You can also set the saveUrl,updateUrl,destroyUrl properties to automatic synchronization data from client to server.
Properties
The properties extend from datagrid, below is the added properties for edatagrid.
| Name | Type | Description | Default |
|---|---|---|---|
| destroyMsg | object | The confirm dialog message to display while destroying a row. |
destroyMsg:{
norecord:{ // when no record is selected
title:'Warning',
msg:'No record is selected.'
},
confirm:{ // when select a row
title:'Confirm',
msg:'Are you sure you want to delete?'
}
}
|
| url | string | A URL to retrieve data from server. | null |
| saveUrl | string | A URL to save data to server and return the added row. | null |
| updateUrl | string | A URL to update data to server and return the updated row. | null |
| destroyUrl | string | A URL to post 'id' parameter to server to destroy that row. | null |
| tree | selector | The tree selector to show the corresponding tree component. | null |
| treeUrl | string | A URL to retrieve the tree data. | null |
| treeDndUrl | string | A URL to process the drag and drop operation. | null |
| treeTextField | string | Defines the tree text field name. | name |
| treeParentField | string | Defines the tree parent node field name. | parentId |
Events
The events extend from datagrid, below is the added events for edatagrid.
| Name | Parameters | Description |
|---|---|---|
| onAdd | index,row | Fires when a new row is added. |
| onEdit | index,row | Fires when a row is editing. |
| onBeforeSave | index | Fires before a row to be saved, return false to cancel this save action. |
| onSave | index,row | Fires when a row is saved. |
| onDestroy | index,row | Fires when a row is destroy. |
Methods
The methods extend from datagrid, below is the added or overridden methods for edatagrid.
| Name | Parameter | Description |
|---|---|---|
| options | none | Return the options object. |
| enableEditing | none | Enable the datagrid editing. |
| disableEditing | none | Disable the datagrid editing. |
| editRow | index | Edit the specified row. |
| addRow | none | Add a new empty row. |
| saveRow | none | Save the editing row that will be posted to server. |
| cancelRow | none | Cancel the editing row. |
| destroyRow | none | Destroy the current selected row. |