editorOptions.md

id	GridBaseColumn.editorOptions
type	any

---

shortDescription

Configures the default UI component used for editing and filtering in the filter row.

---

In this object, you can specify the default UI component's properties (except onValueChanged, which you can specify in onEditorPreparing).

The default editor UI component depends on the column configuration. The following table illustrates the dependency:

Column Configuration		Default Editor
dataType:	"date" "datetime"	DateBox
	"number"	NumberBox
	"boolean"	CheckBox
	"string" "object"	TextBox
lookup is defined		SelectBox

---

Angular

Because of this dependency, editorOptions cannot be typed and are not implemented as nested configuration components. Specify editorOptions with an object.

<!-- tab: app.component.html -->
<dx-{widget-name} ... >
    <dxi-{widget-name}-column ...
        [editorOptions]="{ format: 'currency', showClearButton: true }">
    </dxi-{widget-name}-column>
</dx-{widget-name}>

<!-- tab: app.module.ts -->
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { Dx{WidgetName}Module } from 'devextreme-angular';

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

Vue

Because of this dependency, editorOptions cannot be typed and are not implemented as nested configuration components. Specify editorOptions with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.

<!-- tab: App.vue -->
<template>
    <Dx{WidgetName} ... >
        <DxColumn ...
            :editor-options="columnEditorOptions"
        />
    </Dx{WidgetName}>
</template>

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

import Dx{WidgetName}, {
    DxColumn
} from 'devextreme-vue/{widget-name}';

export default {
    components: {
        Dx{WidgetName},
        DxColumn
    },
    data() {
        return {
            columnEditorOptions: { format: 'currency', showClearButton: true }
        }
    }
}
</script>

React

Because of this dependency, editorOptions cannot be typed and are not implemented as nested configuration components. Specify editorOptions with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.

<!-- tab: App.js -->
import React from 'react';

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

import {WidgetName}, {
    Column
} from 'devextreme-react/{widget-name}';

class App extends React.Component {
    columnEditorOptions = { format: 'currency', showClearButton: true };

    render() {
        return (
            <{WidgetName} ... >
                <Column ...
                    editorOptions={this.columnEditorOptions}
                />
            </{WidgetName}>
        );
    }
}
export default App;

---

#include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomEditors/" }

Other properties that allow editor customization include:

• columns[].editCellTemplate
  Use it to replace the default editor.

• onEditorPreparing
  Use it to:

  • Change the editor type.
  • Override the default editor's onValueChanged handler.
  • Dynamically change editor properties in the editing state.
  • Implement other customization cases.

#####See Also#####

• columns[].showEditorAlways