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