React TreeList - editing

The widget allows a user to edit data in several modes, which are detailed in the mode option. To define what editing operations a user can perform, specify the allowAdding, allowUpdating and allowDeleting options. Before enabling an operation, make sure that your data source supports it.

Watch Video

See Also

• Editing

In the following code, the Add button is added to rows whose status is not "Completed":

$(function(){
    $("#treeListContainer").dxTreeList({
        // ...
        editing: {
            allowAdding: function(e) {
                if(e.row.data.Task_Status == "Completed") return false;
                return true;
            }
        }
    })
})

import { dxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    allowAdding: function(e) {
        if(e.row.data.Task_Status == "Completed") return false;
        return true;
    }
}
@NgModule({
    imports: [
        // ...
        dxTreeListModule
    ],
    // ...
})

<dx-tree-list ... >
    <dxo-editing
        [allowAdding]="allowAdding">
    </dxo-editing>
</dx-tree-list>

See Also

• onRowInserting
• onRowInserted
• addRow()

See an example in the allowAdding option.

See Also

• onRowRemoved
• onRowRemoving
• deleteRow(rowIndex)
• undeleteRow(rowIndex)

See an example in the allowAdding option.

See Also

• onRowUpdating
• onRowUpdated
• cellValue(rowIndex, visibleColumnIndex, value)

Default form editors depend on the columns' configuration. If the generated form does not meet your requirements, and you need to reorganize form items or set other form options, specify it in the form object. To link a form item with a grid column, assign identical values to the form.items.dataField and columns.dataField options.

If you need to customize an individual form item, use the formItem object.

See Also

• Form Guides

The following list points out the differences in editing modes.

• Row
  A user edits one row at a time. The widget saves changes when the row leaves the editing state. See demo.
• Batch
  A user edits data cell by cell. The widget does not save changes until a user clicks the global "Save" button. See demo.
• Cell
  Differs from the batch mode in that the widget saves changes when the cell leaves the editing state. See demo.
• Form
  On entering the editing state, a row becomes a form with editable fields. The widget saves changes after a user clicks the "Save" button. See demo.
• Popup
  Differs from the form mode in that the form with editable fields is placed in a popup window. See demo.

Use the GridEditMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Row, Batch, Cell, Form, and Popup.

You can specify most of the Popup options in this object except those listed below. The TreeList overrides these options.

• contentTemplate
• fullScreen
• showTitle
• toolbarItems

The popup always contains a form whose items are used for editing. Use the form option to customize the form items.

View Demo

The following table shows the operations that are performed after saving changes in different modes:

Use the GridEditRefreshMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Full, Reshape, and Repaint.