Angular TreeList - editing

Configures editing.

Selector: dxo-editing

Type:

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

NOTE

Editing does not work with hierarchical data sources out of the box, but you can use the code sample from this KB to implement it.

View Demo

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:

Name	Type	Description
row	TreeList Row	The row's properties.
component	TreeList	The UI component's instance.

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) {
                return e.row.data.Task_Status !== "Completed";
            }
        }
    })
})

Angular

TypeScript

HTML

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

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

Vue

App.vue

<template>
    <DxTreeList ... >
        <DxEditing
            :allow-adding="allowAdding"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxEditing
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxEditing
    },
    // ...
    methods: {
        allowAdding(e) {
            return e.row.data.Task_Status !== "Completed";
        }
    }
}
</script>

React

App.js

import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Editing
} from 'devextreme-react/tree-list';

export default function App() {
    const allowAdding = useCallback((e) => {
        return e.row.data.Task_Status !== "Completed";
    }, []);

    return (
        <TreeList ... >
            <Editing
                allowAdding={allowAdding}
            />
        </TreeList>
    );
}

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:

Name	Type	Description
row	TreeList Row	The row's properties.
component	TreeList	The UI component's instance.

Return Value:

Boolean

true if the row can be deleted; otherwise false.

Default Value: false

See an example in the allowAdding property.

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:

Name	Type	Description
row	TreeList Row	The row's properties.
component	TreeList	The UI component's instance.

Return Value:

Boolean

true if the row can be updated; otherwise false.

Default Value: false

See an example in the allowAdding property.

changes

An array of pending row changes.

Selector: dxi-change

Type:

Object

Default Value: []

Raised Events: onOptionChanged

This array can be changed from the UI, with native JavaScript methods, or with UI component methods (addRow, editRow, editCell, deleteRow).

View Demo

confirmDelete

Specifies if confirmation is required when a user deletes a row.

Type:

Boolean

Default Value: true

editColumnName

The name of a column being edited. Applies only if editing.mode is "cell" or "batch".

Type:

String

Default Value: null

Raised Events: onOptionChanged

editRowKey

The key(s) of a row being edited.

Type: any

Default Value: null

Raised Events: onOptionChanged

Values for this property are taken from the data field(s) specified in the keyExpr property or the key property of the store.

View Demo

form

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

Selector: dxo-form

Type:

Form Configuration

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 properties, 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 properties.

jQuery

index.js

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        editing: {
            allowUpdating: true,
            mode: "form",
            form: {
                items: [{
                    itemType: "group",
                    caption: "Personal Data",
                    items: [
                        { dataField: "Prefix" },
                        { dataField: "Full_Name" },
                        { dataField: "Position" },
                        { dataField: "Duties", editorType: "dxTextArea" }
                    ]
                    // or simply
                    // items: ["Prefix", "Full_Name", "Position"]
                }, {
                    itemType: "group",
                    caption: "Contacts",
                    items: ["Email", "Skype"]
                }]
            }
        },
        columns: [ 
            { dataField: "Full_Name" }, 
            { dataField: "Prefix" },
            { dataField: "Position" },
            { dataField: "Duties" },
            { dataField: "Email" },
            { dataField: "Skype" } 
        ]
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-tree-list ... >
    <dxo-editing
        [allowUpdating]="true"
        mode="form">
        <dxo-form>
            <dxi-item itemType="group" caption="Personal Data">
                <dxi-item dataField="Prefix"></dxi-item>
                <dxi-item dataField="Full_Name"></dxi-item>
                <dxi-item dataField="Position"></dxi-item>
                <dxi-item dataField="Duties" editorType="dxTextArea"></dxi-item>
            </dxi-item>
            <dxi-item itemType="group" caption="Contacts">
                <dxi-item dataField="Email"></dxi-item>
                <dxi-item dataField="Skype"></dxi-item>
            </dxi-item>
        </dxo-form>
    </dxo-editing>
    <dxi-column dataField="Full_Name"></dxi-column>
    <dxi-column dataField="Prefix"></dxi-column>
    <dxi-column dataField="Position"></dxi-column>
    <dxi-column dataField="Duties"></dxi-column>
    <dxi-column dataField="Email"></dxi-column>
    <dxi-column dataField="Skype"></dxi-column>
</dx-tree-list>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTreeListModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTreeListModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().TreeList()
    // ...
    .Editing(e => e
        .AllowUpdating(true)
        .Mode(GridEditMode.Form)
        .Form(f => f
            .Items(i => {
                i.AddGroup()
                    .Caption("Personal Data")
                    .Items(groupItems => {
                        groupItems.AddSimple().DataField("Prefix");
                        groupItems.AddSimple().DataField("Full_Name");
                        groupItems.AddSimple().DataField("Position");
                        groupItems.AddSimple().DataField("Duties")
                            .Editor(e => e.TextArea());
                    });
                i.AddGroup()
                    .Caption("Contacts")
                    .Items(groupItems => {
                        groupItems.AddSimple().DataField("Email");
                        groupItems.AddSimple().DataField("Skype");
                    });
            })
        )
    )
    .Columns(cols => {
        cols.Add().DataField("Full_Name");
        cols.Add().DataField("Prefix");
        cols.Add().DataField("Position");
        cols.Add().DataField("Duties");
        cols.Add().DataField("Email");
        cols.Add().DataField("Skype");
    })
)

Vue

App.vue

<template>
    <DxTreeList ... >
        <DxEditing
            :allow-updating="true"
            mode="form">
                <DxForm>
                    <DxItem itemType="group" caption="Personal Data">
                        <DxItem dataField="Prefix" />
                        <DxItem dataField="Full_Name" />
                        <DxItem dataField="Position" />
                        <DxItem dataField="Duties" editorType="dxTextArea" />
                    </DxItem>
                    <DxItem itemType="group" caption="Contacts">
                        <DxItem dataField="Email" />
                        <DxItem dataField="Skype" />
                    </DxItem>
                </DxForm>
        </DxEditing>
        <DxColumn data-field="Full_Name" />
        <DxColumn data-field="Prefix" />
        <DxColumn data-field="Position" />
        <DxColumn data-field="Duties" />
        <DxColumn data-field="Email" />
        <DxColumn data-field="Skype" />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, { DxColumn, DxEditing, DxForm } from 'devextreme-vue/tree-list';
import { DxItem } from 'devextreme-vue/form';

export default {
    components: {
        DxTreeList,
        DxEditing,
        DxForm,
        DxItem
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    Editing,
    Form
} from 'devextreme-react/tree-list';
import { Item } from 'devextreme-react/form';

class App extends React.Component {
    render() {
        return (
            <TreeList ... >
                <Editing
                    mode="form"
                    allowUpdating={true}>
                    <Form>
                        <Item itemType="group" caption="Personal Data">
                            <Item dataField="Prefix" />
                            <Item dataField="Full_Name" />
                            <Item dataField="Position" />
                            <Item dataField="Duties" editorType="dxTextArea" />
                        </Item>
                        <Item itemType="group" caption="Contacts">
                            <Item dataField="Email" />
                            <Item dataField="Skype" />
                        </Item>
                    </Form>
                </Editing>
                <Column dataField="Prefix" />
                <Column dataField="Full_Name" />
                <Column dataField="Position" />
                <Column dataField="Duties" />
                <Column dataField="Email" />
                <Column dataField="Skype" />
            </TreeList>
        );
    }
}
export default App;

Do not specify the following properties in the form object:

readOnly (use columns[].allowEditing instead)
template for items (use columns[].editCellTemplate instead)
Event handlers (properties that start with "on..."), except for onInitialized and onContentReady

Also, the colCount property defaults to 2, but can be redefined. Refer to the following help topic for more information about form customization: Customize Edit Form.

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

NOTE

jQuery

If you configure a form with tabbed items, the component does not validate editors in hidden tabs. To validate hidden tab editors, disable form.TabbedItem.tabPanelOptions.deferRendering:

index.js

$(function() {
    $('#gridContainer').dxDataGrid({
        editing: {
            form: {
                items: [{
                    itemType: 'tabbed',
                    tabPanelOptions: {
                        deferRendering: false,
                    },
                    tabs: [{
                        items: [ ... ],
                    }]
                }]
            }
        }
    })
})

Angular

The nested component that configures the form property does not support event and two-way property bindings.

If you configure a form with tabbed items, the component does not validate editors in hidden tabs. To validate hidden tab editors, disable form.TabbedItem.tabPanelOptions.deferRendering:

app.component.html

app.module.ts

<dx-data-grid ... >
    <dxo-editing ... >
        <dxo-form>
            <dxi-item itemType="tabbed">
                <dxo-tab-panel-options [deferRendering]="false" />
                <dxi-tab ... >
                    <dxi-item ... />
                </dxi-tab>
            </dxi-item>
        </dxo-form>
    </dxo-editing>
</dx-data-grid>

import { DxDataGridModule, DxFormModule } from 'devextreme-angular';

@NgModule({
    imports: [
        BrowserModule,
        DxFormModule,
    ],
    // ...
})

Vue

The nested component that configures the form property does not support event and two-way property bindings.

If you configure a form with tabbed items, the component does not validate editors in hidden tabs. To validate hidden tab editors, disable form.TabbedItem.tabPanelOptions.deferRendering:

App.vue

<template>
    <DxDataGrid ... >
        <DxEditing ... >
            <DxForm>
                <DxTabbedItem>
                    <DxTabPanelOptions :deferRendering="false" />
                    <DxTab ... >
                        <DxSimpleItem ... />
                    </DxTab>
                </DxTabbedItem>
            </DxForm>
        </DxEditing>
    </DxDataGrid>
</template>

<script setup lang="ts">
import { DxDataGrid, DxEditing, DxForm } from 'devextreme-vue/data-grid';
import { DxSimpleItem, DxTabbedItem, DxTabPanelOptions, DxTab } from 'devextreme-vue/form';

</script>

React

If you configure a form with tabbed items, the component does not validate editors in hidden tabs. To validate hidden tab editors, disable form.TabbedItem.tabPanelOptions.deferRendering:

App.tsx

import { DataGrid, Editing, Form } from 'devextreme-react/data-grid';
import { SimpleItem, TabbedItem, TabPanelOptions, Tab } from 'devextreme-react/form';

function App() {
    return (
        <DataGrid ... >
            <Editing ... >
                <Form>
                    <TabbedItem>
                        <TabPanelOptions deferRendering={false} />
                        <Tab ... >
                            <SimpleItem ... />
                        </Tab>
                    </TabbedItem>
                </Form>
            </Editing>
        </DataGrid>
    )
}

View Demo

mode

Specifies how a user edits data.

Type:

GridsEditMode

Default Value: 'row'

The following list points out the differences in editing modes:

Row
A user edits one row at a time. The UI component saves changes when the row leaves the editing state.

View Demo
Batch
A user edits data cell by cell. The UI component does not save changes until a user clicks the global "Save" button.

View Demo
Cell
Differs from the batch mode in that the UI component saves changes when the cell leaves the editing state.

View Demo
Form
On entering the editing state, a row becomes a form with editable fields. The UI component saves changes after a user clicks the "Save" button.

View Demo
Popup
Differs from the form mode in that the form with editable fields is placed in a popup window.

View Demo

popup

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

Selector: dxo-popup

Type:

Popup Configuration

You can specify any Popup property in this object, but note that the following properties override the TreeList's internal logic:

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

Angular

NOTE

The nested component that configures the popup property does not support event bindings and two-way property bindings.

Vue

NOTE

The nested component that configures the popup property does not support event bindings and two-way property bindings.

View Demo

refreshMode

Specifies operations that are performed after saving changes.

Type:

GridsEditRefreshMode

Default Value: 'full'

The following table lists operations that are performed after changes in different modes are saved:

Mode	Data reloading	Data processing operations¹	UI component 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 those elements whose data had changed.
Set remoteOperations to false and cacheEnabled to true to avoid data reloading.

View Demo

NOTE

When the refreshMode is set to "reshape" or "repaint", the server should respond to the insert or update request by sending back the data item saved in the database. See the DataGridWebApiController tab in the CRUD Operations demo for an example of the server-side implementation. The InsertOrder and UpdateOrder actions illustrate this case.
Set refreshMode to "full" if you need to update row keys.

selectTextOnEditStart

Specifies whether to select text in a cell when a user starts editing.

Type:

Boolean

Default Value: false

View Demo

startEditAction

Specifies whether a single or double click should switch a cell to the editing state. Applies if editing.mode is "cell" or "batch".

Type:

StartEditAction

Default Value: 'click'

View Demo

texts

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

Selector: dxo-texts

Type:

EditingTexts

The following code shows the editing.texts declaration syntax:

jQuery

index.js

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        editing: {
            // ...
            texts: {
                deleteRow: "Remove"
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-tree-list ... >
    <dxo-editing ... >
        <dxo-texts
            deleteRow="Remove">
        </dxo-texts>
    </dxo-editing>
</dx-tree-list>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTreeListModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTreeListModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxTreeList ... >
        <DxEditing ... >
            <DxTexts
                delete-row="Remove"
            />
        </DxEditing>
    </DxTreeList> 
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxEditing,
    DxTexts
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxEditing,
        DxTexts
    },
    data() {
        // ...
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Editing,
    Texts
} from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ... >
                <Editing>
                    <Texts
                        deleteRow="Remove"
                    />
                </Editing>
            </TreeList>
        );
    }
}
export default App;

useIcons

Specifies whether the edit column uses icons instead of links.

Type:

Boolean

Default Value: false, true (Fluent, Material)

View Demo

Angular TreeList - editing

See Also

allowAdding

jQuery

Angular

Vue

React

See Also

allowDeleting

See Also

allowUpdating

See Also

changes

confirmDelete

editColumnName

See Also

editRowKey

See Also

form

jQuery

Angular

ASP.NET MVC Controls

Vue

React

jQuery

Angular

Vue

React

See Also

mode

popup

Angular

Vue

refreshMode

selectTextOnEditStart

See Also

startEditAction

See Also

texts

jQuery

Angular

Vue

React

useIcons