DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Form Editing

The TreeList can use the Form component to arrange cell editors when users modify a row. The Form allows users to edit values from visible and hidden columns.

To enable form edit mode, configure the following properties:

Backend API
<template> <div id="tree-list-demo"> <DxTreeList id="employees" :data-source="employees" :column-auto-width="true" :show-row-lines="true" :show-borders="true" :expanded-row-keys="expandedRowKeys" key-expr="ID" parent-id-expr="Head_ID" @editor-preparing="onEditorPreparing" @init-new-row="onInitNewRow" > <DxEditing :allow-updating="true" :allow-deleting="allowDeleting" :allow-adding="true" mode="form" /> <DxColumn data-field="Full_Name" > <DxValidationRule type="required" /> </DxColumn> <DxColumn data-field="Prefix" caption="Title" > <DxValidationRule type="required" /> </DxColumn> <DxColumn :visible="false" data-field="Head_ID" caption="Head" > <DxLookup :data-source="lookupData" value-expr="ID" display-expr="Full_Name" /> <DxValidationRule type="required" /> </DxColumn> <DxColumn data-field="Title" caption="Position" > <DxValidationRule type="required" /> </DxColumn> <DxColumn :width="150" data-field="City" > <DxValidationRule type="required" /> </DxColumn> <DxColumn :width="120" data-field="Hire_Date" data-type="date" > <DxValidationRule type="required" /> </DxColumn> <DxColumn type="buttons"> <DxButton name="edit"/> <DxButton name="delete"/> </DxColumn> </DxTreeList> </div> </template> <script setup lang="ts"> import { DxTreeList, DxEditing, DxColumn, DxValidationRule, DxLookup, DxButton, DxTreeListTypes, } from 'devextreme-vue/tree-list'; import { employees } from './data.ts'; const expandedRowKeys = [1, 2, 3, 4, 5]; const lookupData = { store: employees, sort: 'Full_Name', }; function onEditorPreparing(e: DxTreeListTypes.EditorPreparingEvent) { if (e.dataField === 'Head_ID' && e.row.data.ID === 1) { e.editorOptions.disabled = true; e.editorOptions.value = null; } } function onInitNewRow(e: DxTreeListTypes.InitNewRowEvent) { e.data.Head_ID = 1; } function allowDeleting(e) { return e.row.data.ID !== 1; } </script> <style scoped> #tree-list-demo { min-height: 700px; } #employees { max-height: 640px; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.4/cjs', 'devextreme-vue': 'npm:devextreme-vue@24.1.4/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.10/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
export const employees = [{ ID: 1, Head_ID: 0, Full_Name: 'John Heart', Prefix: 'Mr.', Title: 'CEO', City: 'Los Angeles', State: 'California', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', Mobile_Phone: '(213) 555-9392', Birth_Date: '1964-03-16', Hire_Date: '1995-01-15', }, { ID: 2, Head_ID: 1, Full_Name: 'Samantha Bright', Prefix: 'Dr.', Title: 'COO', City: 'Los Angeles', State: 'California', Email: 'samanthab@dx-email.com', Skype: 'samanthab_DX_skype', Mobile_Phone: '(213) 555-2858', Birth_Date: '1966-05-02', Hire_Date: '2004-05-24', }, { ID: 3, Head_ID: 1, Full_Name: 'Arthur Miller', Prefix: 'Mr.', Title: 'CTO', City: 'Denver', State: 'Colorado', Email: 'arthurm@dx-email.com', Skype: 'arthurm_DX_skype', Mobile_Phone: '(310) 555-8583', Birth_Date: '1972-07-11', Hire_Date: '2007-12-18', }, { ID: 4, Head_ID: 1, Full_Name: 'Robert Reagan', Prefix: 'Mr.', Title: 'CMO', City: 'Bentonville', State: 'Arkansas', Email: 'robertr@dx-email.com', Skype: 'robertr_DX_skype', Mobile_Phone: '(818) 555-2387', Birth_Date: '1974-09-07', Hire_Date: '2002-11-08', }, { ID: 5, Head_ID: 1, Full_Name: 'Greta Sims', Prefix: 'Ms.', Title: 'HR Manager', City: 'Atlanta', State: 'Georgia', Email: 'gretas@dx-email.com', Skype: 'gretas_DX_skype', Mobile_Phone: '(818) 555-6546', Birth_Date: '1977-11-22', Hire_Date: '1998-04-23', }, { ID: 6, Head_ID: 3, Full_Name: 'Brett Wade', Prefix: 'Mr.', Title: 'IT Manager', City: 'Reno', State: 'Nevada', Email: 'brettw@dx-email.com', Skype: 'brettw_DX_skype', Mobile_Phone: '(626) 555-0358', Birth_Date: '1968-12-01', Hire_Date: '2009-03-06', }, { ID: 7, Head_ID: 5, Full_Name: 'Sandra Johnson', Prefix: 'Mrs.', Title: 'Controller', City: 'Beaver', State: 'Utah', Email: 'sandraj@dx-email.com', Skype: 'sandraj_DX_skype', Mobile_Phone: '(562) 555-2082', Birth_Date: '1974-11-15', Hire_Date: '2005-05-11', }, { ID: 8, Head_ID: 4, Full_Name: 'Ed Holmes', Prefix: 'Dr.', Title: 'Sales Manager', City: 'Malibu', State: 'California', Email: 'edwardh@dx-email.com', Skype: 'edwardh_DX_skype', Mobile_Phone: '(310) 555-1288', Birth_Date: '1973-07-14', Hire_Date: '2005-06-19', }, { ID: 9, Head_ID: 3, Full_Name: 'Barb Banks', Prefix: 'Mrs.', Title: 'Support Manager', City: 'Phoenix', State: 'Arizona', Email: 'barbarab@dx-email.com', Skype: 'barbarab_DX_skype', Mobile_Phone: '(310) 555-3355', Birth_Date: '1979-04-14', Hire_Date: '2002-08-07', }, { ID: 10, Head_ID: 2, Full_Name: 'Kevin Carter', Prefix: 'Mr.', Title: 'Shipping Manager', City: 'San Diego', State: 'California', Email: 'kevinc@dx-email.com', Skype: 'kevinc_DX_skype', Mobile_Phone: '(213) 555-2840', Birth_Date: '1978-01-09', Hire_Date: '2009-08-11', }, { ID: 11, Head_ID: 5, Full_Name: 'Cindy Stanwick', Prefix: 'Ms.', Title: 'HR Assistant', City: 'Little Rock', State: 'Arkansas', Email: 'cindys@dx-email.com', Skype: 'cindys_DX_skype', Mobile_Phone: '(818) 555-6655', Birth_Date: '1985-06-05', Hire_Date: '2008-03-24', }, { ID: 12, Head_ID: 8, Full_Name: 'Sammy Hill', Prefix: 'Mr.', Title: 'Sales Assistant', City: 'Pasadena', State: 'California', Email: 'sammyh@dx-email.com', Skype: 'sammyh_DX_skype', Mobile_Phone: '(626) 555-7292', Birth_Date: '1984-02-17', Hire_Date: '2012-02-01', }, { ID: 13, Head_ID: 10, Full_Name: 'Davey Jones', Prefix: 'Mr.', Title: 'Shipping Assistant', City: 'Pasadena', State: 'California', Email: 'davidj@dx-email.com', Skype: 'davidj_DX_skype', Mobile_Phone: '(626) 555-0281', Birth_Date: '1983-03-06', Hire_Date: '2011-04-24', }, { ID: 14, Head_ID: 10, Full_Name: 'Victor Norris', Prefix: 'Mr.', Title: 'Shipping Assistant', City: 'Little Rock', State: 'Arkansas', Email: 'victorn@dx-email.com', Skype: 'victorn_DX_skype', Mobile_Phone: '(213) 555-9278', Birth_Date: '1986-07-23', Hire_Date: '2012-07-23', }, { ID: 15, Head_ID: 10, Full_Name: 'Mary Stern', Prefix: 'Ms.', Title: 'Shipping Assistant', City: 'Beaver', State: 'Utah', Email: 'marys@dx-email.com', Skype: 'marys_DX_skype', Mobile_Phone: '(818) 555-7857', Birth_Date: '1982-04-08', Hire_Date: '2012-08-12', }, { ID: 16, Head_ID: 10, Full_Name: 'Robin Cosworth', Prefix: 'Mrs.', Title: 'Shipping Assistant', City: 'Los Angeles', State: 'California', Email: 'robinc@dx-email.com', Skype: 'robinc_DX_skype', Mobile_Phone: '(818) 555-0942', Birth_Date: '1981-06-12', Hire_Date: '2012-09-01', }, { ID: 17, Head_ID: 9, Full_Name: 'Kelly Rodriguez', Prefix: 'Ms.', Title: 'Support Assistant', City: 'Boise', State: 'Idaho', Email: 'kellyr@dx-email.com', Skype: 'kellyr_DX_skype', Mobile_Phone: '(818) 555-9248', Birth_Date: '1988-05-11', Hire_Date: '2012-10-13', }, { ID: 18, Head_ID: 9, Full_Name: 'James Anderson', Prefix: 'Mr.', Title: 'Support Assistant', City: 'Atlanta', State: 'Georgia', Email: 'jamesa@dx-email.com', Skype: 'jamesa_DX_skype', Mobile_Phone: '(323) 555-4702', Birth_Date: '1987-01-29', Hire_Date: '2012-10-18', }, { ID: 19, Head_ID: 9, Full_Name: 'Antony Remmen', Prefix: 'Mr.', Title: 'Support Assistant', City: 'Boise', State: 'Idaho', Email: 'anthonyr@dx-email.com', Skype: 'anthonyr_DX_skype', Mobile_Phone: '(310) 555-6625', Birth_Date: '1986-02-19', Hire_Date: '2013-01-19', }, { ID: 20, Head_ID: 8, Full_Name: 'Olivia Peyton', Prefix: 'Mrs.', Title: 'Sales Assistant', City: 'Atlanta', State: 'Georgia', Email: 'oliviap@dx-email.com', Skype: 'oliviap_DX_skype', Mobile_Phone: '(310) 555-2728', Birth_Date: '1981-06-03', Hire_Date: '2012-05-14', }, { ID: 21, Head_ID: 6, Full_Name: 'Taylor Riley', Prefix: 'Mr.', Title: 'Network Admin', City: 'San Jose', State: 'California', Email: 'taylorr@dx-email.com', Skype: 'taylorr_DX_skype', Mobile_Phone: '(310) 555-7276', Birth_Date: '1982-08-14', Hire_Date: '2012-04-14', }, { ID: 22, Head_ID: 6, Full_Name: 'Amelia Harper', Prefix: 'Mrs.', Title: 'Network Admin', City: 'Los Angeles', State: 'California', Email: 'ameliah@dx-email.com', Skype: 'ameliah_DX_skype', Mobile_Phone: '(213) 555-4276', Birth_Date: '1983-11-19', Hire_Date: '2011-02-10', }, { ID: 23, Head_ID: 6, Full_Name: 'Wally Hobbs', Prefix: 'Mr.', Title: 'Programmer', City: 'Chatsworth', State: 'California', Email: 'wallyh@dx-email.com', Skype: 'wallyh_DX_skype', Mobile_Phone: '(818) 555-8872', Birth_Date: '1984-12-24', Hire_Date: '2011-02-17', }, { ID: 24, Head_ID: 6, Full_Name: 'Brad Jameson', Prefix: 'Mr.', Title: 'Programmer', City: 'San Fernando', State: 'California', Email: 'bradleyj@dx-email.com', Skype: 'bradleyj_DX_skype', Mobile_Phone: '(818) 555-4646', Birth_Date: '1988-10-12', Hire_Date: '2011-03-02', }, { ID: 25, Head_ID: 6, Full_Name: 'Karen Goodson', Prefix: 'Miss', Title: 'Programmer', City: 'South Pasadena', State: 'California', Email: 'kareng@dx-email.com', Skype: 'kareng_DX_skype', Mobile_Phone: '(626) 555-0908', Birth_Date: '1987-04-26', Hire_Date: '2011-03-14', }, { ID: 26, Head_ID: 5, Full_Name: 'Marcus Orbison', Prefix: 'Mr.', Title: 'Travel Coordinator', City: 'Los Angeles', State: 'California', Email: 'marcuso@dx-email.com', Skype: 'marcuso_DX_skype', Mobile_Phone: '(213) 555-7098', Birth_Date: '1982-03-02', Hire_Date: '2005-05-19', }, { ID: 27, Head_ID: 5, Full_Name: 'Sandy Bright', Prefix: 'Ms.', Title: 'Benefits Coordinator', City: 'Denver', State: 'Colorado', Email: 'sandrab@dx-email.com', Skype: 'sandrab_DX_skype', Mobile_Phone: '(818) 555-0524', Birth_Date: '1983-09-11', Hire_Date: '2005-06-04', }, { ID: 28, Head_ID: 6, Full_Name: 'Morgan Kennedy', Prefix: 'Mrs.', Title: 'Graphic Designer', City: 'San Fernando Valley', State: 'California', Email: 'morgank@dx-email.com', Skype: 'morgank_DX_skype', Mobile_Phone: '(818) 555-8238', Birth_Date: '1984-07-17', Hire_Date: '2012-01-11', }, { ID: 29, Head_ID: 28, Full_Name: 'Violet Bailey', Prefix: 'Ms.', Title: 'Jr Graphic Designer', City: 'La Canada', State: 'California', Email: 'violetb@dx-email.com', Skype: 'violetb_DX_skype', Mobile_Phone: '(818) 555-2478', Birth_Date: '1985-06-10', Hire_Date: '2012-01-19', }, { ID: 30, Head_ID: 5, Full_Name: 'Ken Samuelson', Prefix: 'Dr.', Title: 'Ombudsman', City: 'St. Louis', State: 'Missouri', Email: 'kents@dx-email.com', Skype: 'kents_DX_skype', Mobile_Phone: '(562) 555-9282', Birth_Date: '1972-09-11', Hire_Date: '2009-04-22', }];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.4/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

A column's default editor is defined automatically based on this column's dataType. To customize this editor or replace it with another editor, use the column's formItem object. For information on settings that you can define in the formItem object, refer to the SimpleItem help topic.

You can also set up the edit Form from scratch. The component's configuration section lists available settings. Specify these settings in the editing.form object. Refer to this object's description for information about form edit mode limitations.

This demo also illustrates the following event handlers:

  • onInitNewRow
    Populates form editors of a new row with default values. In this demo, onInitNewRow sets "John Heart" as the initial Head for new rows.

  • onEditorPreparing
    Customizes form editors. In this demo, this handler forbids users to edit the Head value of John Heart.

Refer to the following help topic to see the full list of the events that edit operations raise: Editing Events.