editing

Configures editing.

Type:

Object

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.

NOTE
Editing works with plain data only.

Watch Video

See Also

allowAdding

Specifies whether a user can add new rows. It is called for each data row when defined as a function.

Type:

Boolean

|

Function

Function parameters:
options:

Object

Information about the current row.

Object structure:
component:

TreeList

The widget's instance.

The row's properties.

Return Value:

Boolean

true if the row can be added; otherwise false.

Default Value: false

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

jQuery
JavaScript
$(function(){
    $("#treeListContainer").dxTreeList({
        // ...
        editing: {
            allowAdding: function(e) {
                if(e.row.data.Task_Status == "Completed") return false;
                return true;
            }
        }
    })
})
Angular
TypeScript
HTML
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

allowDeleting

Specifies whether a user can delete rows. It is called for each data row when defined as a function.

Type:

Boolean

|

Function

Function parameters:
options:

Object

Information about the current row.

Object structure:
component:

TreeList

The widget's instance.

The row's properties.

Return Value:

Boolean

true if the row can be deleted; otherwise false.

Default Value: false

allowUpdating

Specifies whether a user can update rows. It is called for each data row when defined as a function

Type:

Boolean

|

Function

Function parameters:
options:

Object

Information about the current row.

Object structure:
component:

TreeList

The widget's instance.

The row's properties.

Return Value:

Boolean

true if the row can be updated; otherwise false.

Default Value: false

form

Configures the form. Used only if editing.mode is "form" or "popup".

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.

NOTE

You cannot specify the following options in the form object:

Also, the colCount option defaults to 2, but it can be redefined.

NOTE
The fields of a configuration object passed to this option do not support two-way binding in Angular, AngularJS, and Knockout and event bindings in Angular.
See Also

mode

Specifies how a user edits data.

Type:

String

Default Value: 'row'
Accepted Values: 'batch' | 'cell' | 'row' | 'form' | 'popup'

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.

popup

Configures the popup. Used only if editing.mode is "popup".

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

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

NOTE
The fields of a configuration object passed to this option do not support two-way binding in Angular, AngularJS, and Knockout and event bindings in Angular.

View Demo

refreshMode

Specifies operations that are performed after saving changes.

Type:

String

Default Value: 'full'
Accepted Values: 'full' | 'reshape' | 'repaint'

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

Mode Data reloading Data processing operations* Widget repaint**
full + + +
reshape - *** +
(on the client)
+
repaint - - +
* - Data processing operations include paging, filtering, sorting, grouping, and summary calculation (in the DataGrid).
** - Set repaintChangesOnly to true to repaint only elements whose data changed.
*** - Set remoteOperations to false and cacheEnabled to true to avoid data reloading.

View Demo

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.

texts

Contains options that specify texts for editing-related UI elements.

Type:

Object

useIcons

Specifies whether the editing column uses icons instead of links.

Type:

Boolean

Default Value: false, true (Material)