Custom Editors

Different editors can be used to edit cell values in grid columns. The default editor depends on the column configuration. The dependency is illustrated in the editorOptions object's description (this object is used to customize the default editor). In this demo, the SelectBox component is the Status column's default editor, and the editorOptions object is used to specify the component's itemTemplate.

If the default editor is unsuitable, you can replace it with a custom editor. For this, implement an editCellTemplate that allows you to configure the replacement editor's appearance and behavior. To change the cell value and, optionally, the displayed value after the editor's value is changed, use the setValue() method of the editCellTemplate. In this demo, the default editors in the Owner and Assignees columns are replaced with the DropDownBox and TagBox components.

Prev Demo

Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <DxDataGrid :data-source="tasks" :show-borders="true" @row-inserted="onRowInserted" > <DxPaging :enabled="true" :page-size="15" /> <DxHeaderFilter :visible="true"/> <DxSearchPanel :visible="true"/> <DxEditing :allow-updating="true" :allow-adding="true" mode="cell" /> <DxColumn :width="150" :allow-sorting="false" data-field="Owner" edit-cell-template="dropDownBoxEditor" > <DxLookup :data-source="employees" display-expr="FullName" value-expr="ID" /> <DxRequiredRule/> </DxColumn> <DxColumn :width="200" :allow-sorting="false" :cell-template="cellTemplate" :calculate-filter-expression="calculateFilterExpression" data-field="AssignedEmployee" caption="Assignees" edit-cell-template="tagBoxEditor" > <DxLookup :data-source="employees" value-expr="ID" display-expr="FullName" /> <DxRequiredRule/> </DxColumn> <DxColumn data-field="Subject"> <DxRequiredRule/> </DxColumn> <DxColumn :editor-options="{ itemTemplate: 'statusTemplate' }" data-field="Status" width="200" > <DxLookup :data-source="statuses" display-expr="name" value-expr="id" /> <DxRequiredRule/> </DxColumn> <template #statusTemplate="{ data }"> <span v-if="data == null">(All)</span> <div v-else> <img :src="'../../../../images/icons/status-' + data.id + '.svg'" class="status-icon middle" > <span class="middle">{{ data.name }}</span> </div> </template> <template #dropDownBoxEditor="{ data: cellInfo }"> <EmployeeDropDownBoxComponent :value="cellInfo.value" :on-value-changed="cellInfo.setValue" :data-source="employees" /> </template> <template #tagBoxEditor="{ data: cellInfo }"> <EmployeeTagBoxComponent :cell-info="cellInfo" :data-source="employees" :data-grid-component="cellInfo.component" /> </template> </DxDataGrid> </template> <script setup lang="ts"> import { DxDataGrid, DxPaging, DxHeaderFilter, DxSearchPanel, DxEditing, DxColumn, DxLookup, DxRequiredRule, } from 'devextreme-vue/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import { statuses } from './data.js'; import EmployeeDropDownBoxComponent from './EmployeeDropDownBoxComponent.vue'; import EmployeeTagBoxComponent from './EmployeeTagBoxComponent.vue'; const url = 'https://js.devexpress.com/Demos/Mvc/api/CustomEditors'; const employees = createStore({ key: 'ID', loadUrl: `${url}/Employees`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }); const tasks = createStore({ key: 'ID', loadUrl: `${url}/Tasks`, updateUrl: `${url}/UpdateTask`, insertUrl: `${url}/InsertTask`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }); const cellTemplate = (container, options) => { const noBreakSpace = '\u00A0'; const text = (options.value || []).map((element) => options.column.lookup.calculateCellValue(element)).join(', '); container.textContent = text || noBreakSpace; container.title = text; }; const onRowInserted = (e) => { e.component.navigateToRow(e.key); }; function calculateFilterExpression(filterValue, selectedFilterOperation, target) { if (target === 'search' && typeof (filterValue) === 'string') { return [this.dataField, 'contains', filterValue]; } return (data) => (data.AssignedEmployee || []).indexOf(filterValue) !== -1; } </script> <style> .status-icon { height: 16px; width: 16px; display: inline-block; margin-right: 8px; } .middle { vertical-align: middle; } </style>

<template> <DxDropDownBox ref="dropDownBoxRef" :drop-down-options="dropDownOptions" :input-attr="{ 'aria-label': 'Owner' }" :data-source="dataSource" v-model:value="currentValue" display-expr="FullName" value-expr="ID" content-template="contentTemplate" > <template #contentTemplate="{}"> <DxDataGrid :data-source="dataSource" :remote-operations="true" :height="250" :selected-row-keys="[currentValue]" :hover-state-enabled="true" :on-selection-changed="onSelectionChanged" :focused-row-enabled="true" :focused-row-key="currentValue" > <DxColumn data-field="FullName"/> <DxColumn data-field="Title"/> <DxColumn data-field="Department"/> <DxPaging :enabled="true" :page-size="10" /> <DxScrolling mode="virtual"/> <DxSelection mode="single"/> </DxDataGrid> </template> </DxDropDownBox> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxDataGrid, DxPaging, DxSelection, DxScrolling, DxColumn, } from 'devextreme-vue/data-grid'; import DxDropDownBox from 'devextreme-vue/drop-down-box'; import CustomStore from 'devextreme/data/custom_store'; const props = defineProps<{ value: number, // eslint-disable-next-line no-unused-vars onValueChanged(value: number): void, dataSource: CustomStore, }>(); const currentValue = ref(props.value); const dropDownBoxRef = ref<DxDropDownBox | null>(null); const dropDownOptions = { width: 500 }; const onSelectionChanged = (selectionChangedArgs) => { currentValue.value = selectionChangedArgs.selectedRowKeys[0]; props.onValueChanged(currentValue.value); if (selectionChangedArgs.selectedRowKeys.length > 0) { dropDownBoxRef.value!.instance!.close(); } }; </script>

<template> <DxTagBox :data-source="dataSource" v-model:value="currentValue" :show-selection-controls="true" :input-attr="{ 'aria-label': 'Name' }" :max-displayed-tags="3" :show-multi-tag-only="false" :on-value-changed="onValueChanged" :on-selection-changed="onSelectionChanged" :search-enabled="true" value-expr="ID" display-expr="FullName" apply-value-mode="useButtons" /> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxTagBox from 'devextreme-vue/tag-box'; import DataGrid from 'devextreme/ui/data_grid'; import CustomStore from 'devextreme/data/custom_store'; const props = defineProps<{ cellInfo: any, dataSource: CustomStore, dataGridComponent: DataGrid, }>(); const currentValue = ref(props.cellInfo.value); const onSelectionChanged = () => { props.dataGridComponent.updateDimensions(); }; const onValueChanged = (e) => { props.cellInfo.setValue(e.value); }; </script>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@3.9.10/lib/typescript.js"></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.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app" /> </div> </body> </html>

export const statuses = [{ id: 1, name: 'Not Started', }, { id: 2, name: 'In Progress', }, { id: 3, name: 'Deferred', }, { id: 4, name: 'Need Assistance', }, { id: 5, name: 'Completed', }];