Documentation

TreeGrid Data Editing

To allow end-users to edit data, set the editable 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.
The code below shows how to set the 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 the beginRowEdit method. The parameter that you need to pass when you call the method is the Row's ID/Key.
$("#treeGrid").jqxTreeGrid('beginRowEdit', 'ALFKI');
The 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.

$("#treeGrid").jqxTreeGrid('endRowEdit', 'ALFKI', true);
The 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.
$("#treeGrid").jqxTreeGrid('updateRow', rowKey, rowData);
The 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.
The deleteRow method can be used for deleting a row from the TreeGrid.
 $("#treeGrid").jqxTreeGrid('deleteRow', rowKey);
When you call addRow, deleteRow or updateRow methods, the TreeGrid source object's addRow, deleteRow or updateRow would be called as well.

Example

// prepare the data
var 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);
}
};