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);
 }
};