Documentation
TreeGrid Data Editing
To allow end-users to edit data, set theeditable
property to true. When editable
is set to true, end-users can edit a row's data after double-clicking on it or pressing the F2
key.jqxTreeGrid's
editSettings
property configures the editing behavior of the widget.The default
editSettings
object is:
{saveOnPageChange: true, saveOnBlur: true,saveOnSelectionChange: true, cancelOnEsc: true,saveOnEnter: true, editOnDoubleClick: true, editOnF2: true}
- saveOnPageChange - saves the edited value, when the current page is changed.
- saveOnBlur - saves the edited value, when the focus is lost.
- saveOnSelectionChange - saves the edited value, when the end-user selects a new row.
- cancelOnEsc - cancels editing when
ESC
key is pressed. - saveOnEnter - saves the edited value, when
ENTER
key is pressed. - editOnDoubleClick - begins a row edit on double-click.
- editOnF2 - begins a row edit when
F2
key is pressed.
editSettings
property.
$('#treeGrid').jqxTreeGrid({editSettings: { saveOnPageChange: true, saveOnBlur: true,saveOnSelectionChange: false, cancelOnEsc: true,saveOnEnter: true, editOnDoubleClick: true, editOnF2: true }});
Adding, Deleting and Updating
To enter a row into edit mode, call thebeginRowEdit
method. The parameter that you need to pass when you call the method is the Row's ID/Key.
The$("#treeGrid").jqxTreeGrid('beginRowEdit', 'ALFKI');
endRowEdit
ends the editing and saves or cancels the changes. The method has two parameters - Row's ID/Key and a Boolean parameter which specifies whether the changes are saved or not.
$("#treeGrid").jqxTreeGrid('endRowEdit', 'ALFKI');
Invoke the endRowEdit
method and cancel changes.
The$("#treeGrid").jqxTreeGrid('endRowEdit', 'ALFKI', true);
lockRow
and unlockRow
methods are useful in case you wish to disable the editing of a particular row. The parameter that you need to pass when you call any of these methods is the Row's ID/Key.
To validate end-user's input, you can use the TreeGrid Column's
validation
callback function. The function has two parameters - edit cell(Object with the following fields: datafield, displayfield, row and value, where row is the edit row's ID/Key) and the cell's value. The function should return
true
or false
, depending on the implemented validation logic. It can also return a validation object with two fields - result
- true
or false
, and message
- validation string displayed to the users.
Example
$("#treeGrid").jqxTreeGrid({source: dataAdapter,editable: true,columns: [{ text: 'ID', editable: false, columnType: 'none', dataField: 'id', width: 100 },{text: 'Name', dataField: 'name', width: 220,validation: function (cell, value) {if (value.toString().length < 4) {return { message: "Name should be minimum 4 characters", result: false };}return true;}},{text: 'Budget', align: 'right', cellsAlign: 'right', cellsFormat: 'c2', dataField: 'budget', width: 200,validation: function (cell, value) {if (parseInt(value) < 0 || parseInt(value) > 1300000 || value == "") {return { message: "Budget should be in the 0-1 300 000 interval", result: false };}return true;}}]});
The
updateRow
method can be used for updating the data of entire row.
The$("#treeGrid").jqxTreeGrid('updateRow', rowKey, rowData);
addRow
method can be used for adding a new row to the TreeGrid.
$("#treeGrid").jqxTreeGrid('addRow', null, {}, 'first', rowKey);
addRow
parameters:
- Row Key/ID - unique ID which identifies the row. If null is passed, the jqxTreeGrid will generate an unique ID for the row.
- Row Data - Object with Key/Value pairs. To add an empty row, pass {}.
- Row Position - string with two possible values - "last" and "first". By default "last" is used.
- Parent Row Key/ID - unique ID which identifies the Parent Row. If null is passed, the jqxTreeGrid will add the new row at the first level.
deleteRow
method can be used for deleting a row from the TreeGrid.
When you call$("#treeGrid").jqxTreeGrid('deleteRow', rowKey);
addRow
, deleteRow
or updateRow
methods, the TreeGrid source object's addRow
, deleteRow
or updateRow
would be called as well.
Example
// prepare the datavar source ={dataType: "tab",dataFields: [{ name: "Id", type: "number" },{ name: "Name", type: "string" },{ name: "ParentID", type: "number" },{ name: "Population", type: "number" }],hierarchy:{keyDataField: { name: 'Id' },parentDataField: { name: 'ParentID' }},id: 'Id',url: '../sampledata/locations.tsv',addRow: function (rowID, rowData, position, parentID, commit) {// synchronize with the server - send insert command// call commit with parameter true if the synchronization with the server is successful// and with parameter false if the synchronization failed.// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.commit(true);},updateRow: function (rowID, rowData, commit) {// synchronize with the server - send update command// call commit with parameter true if the synchronization with the server is successful// and with parameter false if the synchronization failed.commit(true);},deleteRow: function (rowID, commit) {// synchronize with the server - send delete command// call commit with parameter true if the synchronization with the server is successful// and with parameter false if the synchronization failed.commit(true);}};