Vue 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.
See Also
allowAdding
Specifies whether a user can add new rows. It is called for each data row when defined as a function.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
row |
The row's properties. |
In the following code, the Add button is added to rows whose status is not "Completed":
jQuery
$(function(){ $("#treeListContainer").dxTreeList({ // ... editing: { allowAdding: function(e) { if(e.row.data.Task_Status == "Completed") return false; return true; } } }) })
Angular
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.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
row |
The row's properties. |
See an example in the allowAdding option.
See Also
allowUpdating
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
row |
The row's properties. |
See an example in the allowAdding option.
See Also
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.
jQuery
$(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
<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
@(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
<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.common.css'; 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
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; 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 options in the form object:
readOnly (use allowEditing instead)
template for items that have a dataField (use a column's editCellTemplate instead)
Also, the colCount option defaults to 2, but it can be redefined.
If you need to customize an individual form item, use the formItem object.
See Also
mode
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 5 Control or a DevExtreme-Based ASP.NET Core 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 any Popup option in this object, but note that the following options override the TreeList's internal logic:
The popup always contains a form whose items are used for editing. Use the form option to customize the form's items.
refreshMode
The following table shows the operations that are performed after saving changes in different modes:
Mode | Data reloading | Data processing operations1 | Widget repaint2 |
---|---|---|---|
full | + | + | + |
reshape | - 3 | + (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.
When the refreshMode is "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.
Use the GridEditRefreshMode
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Full
, Reshape
, and Repaint
.
startEditAction
Specifies whether a single or double click should switch a cell to the editing state. Applies if editing.mode is "cell" or "batch".
texts
The following code shows the editing.texts declaration syntax:
jQuery
$(function() { $("#treeListContainer").dxTreeList({ // ... editing: { // ... texts: { deleteRow: "Remove" } } }); });
Angular
<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
<template> <DxTreeList ... > <DxEditing ... > <DxTexts delete-row="Remove" /> </DxEditing> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.common.css'; 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
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; 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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.