Your search did not match any results.
Data Grid

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.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import DataGrid, { Paging, HeaderFilter, SearchPanel, Editing, Column, Lookup, RequiredRule } from 'devextreme-react/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import { statuses } from './data.js'; import EmployeeDropDownBoxComponent from './EmployeeDropDownBoxComponent.js'; import EmployeeTagBoxComponent from './EmployeeTagBoxComponent.js'; import SelectBox from 'devextreme-react/select-box'; 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 }; } }); class App extends React.Component { constructor(props) { super(props); this.statusEditorRender = this.statusEditorRender.bind(this); } 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; } calculateFilterExpression(filterValue, selectedFilterOperation, target) { if(target === 'search' && typeof (filterValue) === 'string') { return [this.dataField, 'contains', filterValue]; } return function(data) { return (data.AssignedEmployee || []).indexOf(filterValue) !== -1; }; } onValueChanged(cell, e) { cell.setValue(e.value); } statusEditorRender(cell) { let onValueChanged = this.onValueChanged.bind(this, cell); return <SelectBox defaultValue={cell.value} {...cell.column.lookup} onValueChanged={onValueChanged} itemRender={this.itemRender} />; } itemRender(data) { let imageSource = `images/icons/status-${ data.id }.png`; if(data != null) { return <div> <img src={imageSource} className="status-icon middle"></img> <span className="middle">{data.name}</span> </div>; } else { return <span>(All)</span>; } } onRowInserted(e) { e.component.navigateToRow(e.key); } render() { return ( <div> <DataGrid dataSource={tasks} showBorders={true} onRowInserted={this.onRowInserted} > <Paging enabled={true} pageSize={15} /> <HeaderFilter visible={true} /> <SearchPanel visible={true} /> <Editing mode="cell" allowUpdating={true} allowAdding={true} /> <Column dataField="Owner" width={150} allowSorting={false} editCellComponent={EmployeeDropDownBoxComponent} > <Lookup dataSource={employees} displayExpr="FullName" valueExpr="ID" /> <RequiredRule /> </Column> <Column dataField="AssignedEmployee" caption="Assignees" width={200} allowSorting={false} editCellComponent={EmployeeTagBoxComponent} cellTemplate={this.cellTemplate} calculateFilterExpression={this.calculateFilterExpression}> <Lookup dataSource={employees} valueExpr="ID" displayExpr="FullName" /> <RequiredRule /> </Column> <Column dataField="Subject"> <RequiredRule /> </Column> <Column dataField="Status" width={200} editCellRender={this.statusEditorRender} > <Lookup dataSource={statuses} displayExpr="name" valueExpr="id" /> <RequiredRule /> </Column> </DataGrid> </div> ); } } export default App;
import React from 'react'; import DataGrid, { Column, Paging, Scrolling, Selection } from 'devextreme-react/data-grid'; import DropDownBox from 'devextreme-react/drop-down-box'; const dropDownOptions = { width: 500 }; export default class EmployeeDropDownBoxComponent extends React.Component { constructor(props) { super(props); this.state = { currentValue: props.data.value }; this.dropDownBoxRef = React.createRef(); this.onSelectionChanged = this.onSelectionChanged.bind(this); this.contentRender = this.contentRender.bind(this); } contentRender() { return ( <DataGrid dataSource={this.props.data.column.lookup.dataSource} remoteOperations={true} keyExpr="ID" height={250} selectedRowKeys={[this.state.currentValue]} hoverStateEnabled={true} onSelectionChanged={this.onSelectionChanged} focusedRowEnabled={true} defaultFocusedRowKey={this.state.currentValue} > <Column dataField="FullName" /> <Column dataField="Title" /> <Column dataField="Department" /> <Paging enabled={true} pageSize={10} /> <Scrolling mode="virtual" /> <Selection mode="single" /> </DataGrid> ); } onSelectionChanged(selectionChangedArgs) { this.setState({ currentValue: selectionChangedArgs.selectedRowKeys[0] }); this.props.data.setValue(this.state.currentValue); if(selectionChangedArgs.selectedRowKeys.length > 0) { this.dropDownBoxRef.current.instance.close(); } } render() { return ( <DropDownBox ref={this.dropDownBoxRef} dropDownOptions={dropDownOptions} dataSource={this.props.data.column.lookup.dataSource} value={this.state.currentValue} displayExpr="FullName" valueExpr="ID" contentRender={this.contentRender}> </DropDownBox> ); } }
import React from 'react'; import TagBox from 'devextreme-react/tag-box'; export default class EmployeeTagBoxComponent extends React.Component { constructor(props) { super(props); this.onValueChanged = this.onValueChanged.bind(this); this.onSelectionChanged = this.onSelectionChanged.bind(this); } onValueChanged(e) { this.props.data.setValue(e.value); } onSelectionChanged() { this.props.data.component.updateDimensions(); } render() { return <TagBox dataSource={this.props.data.column.lookup.dataSource} defaultValue={this.props.data.value} valueExpr="ID" displayExpr="FullName" showSelectionControls={true} maxDisplayedTags={3} showMultiTagOnly={false} applyValueMode="useButtons" searchEnabled={true} onValueChanged={this.onValueChanged} onSelectionChanged={this.onSelectionChanged} />; } }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.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> </div> </body> </html>
.status-icon { height: 16px; width: 16px; display: inline-block; margin-right: 8px; } .middle { vertical-align: middle; }
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/' }, defaultExtension: 'js', meta: { 'devextreme-aspnet-data-nojquery': { 'esModule': true } }, map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', 'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.5.1', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });