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 widget is the Status column's default editor, and the editorOptions object is used to specify the widget's itemTemplate.
If the default editor is unsuitable, replace it with a custom editor by specifying an editCellTemplate. In this template, configure the replacement editor's appearance and behavior. In this demo, the default editors in the Owner and Assignees columns are replaced with the DropDownBox and TagBox widgets.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<dx-data-grid
:data-source="tasks"
:show-borders="true"
:on-row-inserted="(e) => e.component.navigateToRow(e.key)"
>
<dx-paging
:enabled="true"
:page-size="15"
/>
<dx-header-filter :visible="true"/>
<dx-search-panel :visible="true"/>
<dx-editing
:allow-updating="true"
:allow-adding="true"
mode="cell"
/>
<dx-column
:width="150"
:allow-sorting="false"
data-field="Owner"
edit-cell-template="dropDownBoxEditor"
>
<dx-lookup
:data-source="employees"
display-expr="FullName"
value-expr="ID"
/>
<dx-required-rule/>
</dx-column>
<dx-column
:width="200"
:allow-sorting="false"
:cell-template="cellTemplate"
:calculate-filter-expression="calculateFilterExpression"
data-field="AssignedEmployee"
caption="Assignees"
edit-cell-template="tagBoxEditor"
>
<dx-lookup
:data-source="employees"
value-expr="ID"
display-expr="FullName"
/>
<dx-required-rule/>
</dx-column>
<dx-column data-field="Subject">
<dx-required-rule/>
</dx-column>
<dx-column
:editor-options="editorOptions"
data-field="Status"
width="200"
>
<dx-lookup
:data-source="statuses"
display-expr="name"
value-expr="id"
/>
<dx-required-rule/>
</dx-column>
<template #statusTemplate="{ data }">
<span v-if="data == null">(All)</span>
<div v-else>
<img
:src="'images/icons/status-' + data.id + '.png'"
class="status-icon middle"
>
<span class="middle">{{ data.name }}</span>
</div>
</template>
<template #dropDownBoxEditor="{ data: cellInfo }">
<employee-drop-down-box-component
:value="cellInfo.value"
:on-value-changed="cellInfo.setValue"
:data-source="employees"
/>
</template>
<template #tagBoxEditor="{ data: cellInfo }">
<employee-tag-box-component
:value="cellInfo.value"
:on-value-changed="(value) => onValueChanged(value, cellInfo)"
:data-source="employees"
:data-grid-component="cellInfo.component"
/>
</template>
</dx-data-grid>
</template>
<script>
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: function(method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
}
});
const tasks = createStore({
key: 'ID',
loadUrl: `${url}/Tasks`,
updateUrl: `${url}/UpdateTask`,
insertUrl: `${url}/InsertTask`,
onBeforeSend: function(method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
}
});
export default {
components: {
DxDataGrid,
DxPaging,
DxHeaderFilter,
DxSearchPanel,
DxEditing,
DxColumn,
DxLookup,
DxRequiredRule,
EmployeeDropDownBoxComponent,
EmployeeTagBoxComponent
},
data() {
return {
tasks: tasks,
employees: employees,
statuses: statuses,
dropDownOptions: { width: 400 },
editorOptions: { itemTemplate: 'statusTemplate' },
calculateFilterExpression: function(filterValue, selectedFilterOperation, target) {
if(target === 'search' && typeof (filterValue) === 'string') {
return [this.dataField, 'contains', filterValue];
}
return function(data) {
return (data.AssignedEmployee || []).indexOf(filterValue) !== -1;
};
}
};
},
methods: {
cellTemplate(container, options) {
var noBreakSpace = '\u00A0',
text = (options.value || []).map(element => {
return options.column.lookup.calculateCellValue(element);
}).join(', ');
container.textContent = text || noBreakSpace;
container.title = text;
},
onValueChanged(value, cellInfo) {
cellInfo.setValue(value);
cellInfo.component.updateDimensions();
}
}
};
</script>
<style>
.status-icon {
height: 16px;
width: 16px;
display: inline-block;
margin-right: 8px;
}
.middle {
vertical-align: middle;
}
</style>
<template>
<dx-drop-down-box
:ref="dropDownBoxRefName"
:drop-down-options="dropDownOptions"
:data-source="dataSource"
:value.sync="currentValue"
display-expr="FullName"
value-expr="ID"
content-template="contentTemplate"
>
<template #contentTemplate="{}">
<dx-data-grid
: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"
key-expr="ID"
>
<dx-column data-field="FullName"/>
<dx-column data-field="Title"/>
<dx-column data-field="Department"/>
<dx-paging
:enabled="true"
:page-size="10"
/>
<dx-scrolling mode="virtual"/>
<dx-selection mode="single"/>
</dx-data-grid>
</template>
</dx-drop-down-box>
</template>
<script>
import {
DxDataGrid,
DxPaging,
DxSelection,
DxScrolling,
DxColumn
} from 'devextreme-vue/data-grid';
import DxDropDownBox from 'devextreme-vue/drop-down-box';
const dropDownBoxRefName = 'dropDownBoxRef';
export default {
components: {
DxDataGrid,
DxPaging,
DxSelection,
DxScrolling,
DxColumn,
DxDropDownBox
},
props: {
value: {
type: Number,
default: null
},
onValueChanged: {
type: Function,
default: () => function() {}
},
dataSource: {
type: Object,
default: () => {}
}
},
data() {
return {
currentValue: this.value,
dropDownOptions: { width: 500 },
dropDownBoxRefName
};
},
methods: {
onSelectionChanged(selectionChangedArgs) {
this.currentValue = selectionChangedArgs.selectedRowKeys[0];
this.onValueChanged(this.currentValue);
if(selectionChangedArgs.selectedRowKeys.length > 0) {
this.$refs[dropDownBoxRefName].instance.close();
}
}
}
};
</script>
<template>
<dx-tag-box
:data-source="dataSource"
:value.sync="currentValue"
:show-selection-controls="true"
:max-displayed-tags="3"
:show-multi-tag-only="false"
:on-value-changed="(e) => onValueChanged(e.value)"
:on-selection-changed="onSelectionChanged"
:search-enabled="true"
value-expr="ID"
display-expr="FullName"
apply-value-mode="useButtons"
/>
</template>
<script>
import DxTagBox from 'devextreme-vue/tag-box';
export default {
components: { DxTagBox },
props: {
value: {
type: Array,
default: () => []
},
onValueChanged: {
type: Function,
default: () => function() {}
},
dataSource: {
type: Object,
default: () => {}
},
dataGridComponent: {
type: Object,
default: () => {}
}
},
data() {
return {
currentValue: this.value
};
},
methods: {
onSelectionChanged() {
this.dataGridComponent.updateDimensions();
}
}
};
</script>
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
components: { App },
template: '<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/19.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/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'
}];
System.config({
transpiler: 'plugin-babel',
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js',
'devextreme': 'npm:devextreme@19.1',
'devextreme-vue': 'npm:devextreme-vue@19.1',
jszip: 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.5.1',
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build':
'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
meta: {
'*.vue': { loader: 'vue-loader' },
'devextreme-aspnet-data-nojquery': {
'esModule': true
}
},
packages: {
'devextreme-vue': {
main: 'index.js'
},
'devextreme': {
defaultExtension: 'js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true
}
});