Backend API
import React from 'react';
import DataGrid, {
Paging,
HeaderFilter,
SearchPanel,
Editing,
Column,
Lookup,
RequiredRule,
type DataGridTypes,
Pager,
} from 'devextreme-react/data-grid';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
import { statuses } from './data.ts';
import EmployeeDropDownBoxComponent from './EmployeeDropDownBoxComponent.tsx';
import EmployeeTagBoxComponent from './EmployeeTagBoxComponent.tsx';
const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridCustomEditors';
const statusLabel = { 'aria-label': 'Status' };
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: { textContent: any; title: any; }, options) => {
const noBreakSpace = '\u00A0';
const assignees = (options.value || []).map(
(assigneeId) => options.column.lookup.calculateCellValue(assigneeId),
);
const text = assignees.join(', ');
container.textContent = text || noBreakSpace;
container.title = text;
};
function calculateFilterExpression(this: DataGridTypes.Column, filterValue, selectedFilterOperation: DataGridTypes.SelectedFilterOperation, target: string) {
if (target === 'search' && typeof (filterValue) === 'string') {
return [this.dataField, 'contains', filterValue];
}
return (rowData) => (rowData.AssignedEmployee || []).indexOf(filterValue) !== -1;
}
const onRowInserted = (e: DataGridTypes.RowInsertedEvent) => e.component.navigateToRow(e.key);
const statusEditorRender = (cell) => {
const onValueChanged = (e: SelectBoxTypes.ValueChangedEvent) => cell.setValue(e.value);
const itemRender = (data) => {
const imageSource = `images/icons/status-${data.id}.svg`;
if (data != null) {
return (
<div>
<img src={imageSource} className="status-icon middle"></img>
<span className="middle">{data.name}</span>
</div>
);
}
return <span>(All)</span>;
};
return (
<SelectBox
defaultValue={cell.value}
{...cell.column.lookup}
onValueChanged={onValueChanged}
inputAttr={statusLabel}
itemRender={itemRender} />
);
};
const App = () => (
<div>
<DataGrid
dataSource={tasks}
showBorders={true}
onRowInserted={onRowInserted}
>
<Paging enabled={true} defaultPageSize={15} />
<Pager visible={true} />
<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={cellTemplate}
calculateFilterExpression={calculateFilterExpression as any}>
<Lookup
dataSource={employees}
valueExpr="ID"
displayExpr="FullName"
/>
<RequiredRule />
</Column>
<Column dataField="Subject">
<RequiredRule />
</Column>
<Column
dataField="Status"
width={200}
editCellRender={statusEditorRender}
>
<Lookup
dataSource={statuses}
displayExpr="name"
valueExpr="id"
/>
<RequiredRule />
</Column>
</DataGrid>
</div>
);
export default App;
import React from 'react';
import DataGrid, {
Paging,
HeaderFilter,
SearchPanel,
Editing,
Column,
Lookup,
RequiredRule,
Pager,
} from 'devextreme-react/data-grid';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import SelectBox from 'devextreme-react/select-box';
import { statuses } from './data.js';
import EmployeeDropDownBoxComponent from './EmployeeDropDownBoxComponent.js';
import EmployeeTagBoxComponent from './EmployeeTagBoxComponent.js';
const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridCustomEditors';
const statusLabel = { 'aria-label': 'Status' };
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 assignees = (options.value || []).map((assigneeId) =>
options.column.lookup.calculateCellValue(assigneeId));
const text = assignees.join(', ');
container.textContent = text || noBreakSpace;
container.title = text;
};
function calculateFilterExpression(filterValue, selectedFilterOperation, target) {
if (target === 'search' && typeof filterValue === 'string') {
return [this.dataField, 'contains', filterValue];
}
return (rowData) => (rowData.AssignedEmployee || []).indexOf(filterValue) !== -1;
}
const onRowInserted = (e) => e.component.navigateToRow(e.key);
const statusEditorRender = (cell) => {
const onValueChanged = (e) => cell.setValue(e.value);
const itemRender = (data) => {
const imageSource = `images/icons/status-${data.id}.svg`;
if (data != null) {
return (
<div>
<img
src={imageSource}
className="status-icon middle"
></img>
<span className="middle">{data.name}</span>
</div>
);
}
return <span>(All)</span>;
};
return (
<SelectBox
defaultValue={cell.value}
{...cell.column.lookup}
onValueChanged={onValueChanged}
inputAttr={statusLabel}
itemRender={itemRender}
/>
);
};
const App = () => (
<div>
<DataGrid
dataSource={tasks}
showBorders={true}
onRowInserted={onRowInserted}
>
<Paging
enabled={true}
defaultPageSize={15}
/>
<Pager visible={true} />
<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={cellTemplate}
calculateFilterExpression={calculateFilterExpression}
>
<Lookup
dataSource={employees}
valueExpr="ID"
displayExpr="FullName"
/>
<RequiredRule />
</Column>
<Column dataField="Subject">
<RequiredRule />
</Column>
<Column
dataField="Status"
width={200}
editCellRender={statusEditorRender}
>
<Lookup
dataSource={statuses}
displayExpr="name"
valueExpr="id"
/>
<RequiredRule />
</Column>
</DataGrid>
</div>
);
export default App;
import React, { useCallback, useState } from 'react';
import DataGrid, {
Column,
type DataGridTypes,
Paging,
Scrolling,
Selection,
} from 'devextreme-react/data-grid';
import DropDownBox, { type DropDownBoxTypes } from 'devextreme-react/drop-down-box';
const dropDownOptions = { width: 500 };
const ownerLabel = { 'aria-label': 'Owner' };
const EmployeeDropDownBoxComponent = (props) => {
const { data: { value: dataValue } } = props;
const initialSelectedRowKeys = dataValue !== null && dataValue !== undefined ? [dataValue] : [];
const [selectedRowKeys, setSelectedRowKeys] = useState(initialSelectedRowKeys);
const [isDropDownOpened, setDropDownOpened] = useState(false);
const boxOptionChanged = useCallback((e: DropDownBoxTypes.OptionChangedEvent) => {
if (e.name === 'opened') {
setDropDownOpened(e.value);
}
}, []);
const contentRender = useCallback(() => {
const onContextMenuPreparing = (event: DataGridTypes.ContextMenuPreparingEvent) => {
event.items = [];
};
const onSelectionChanged = (args: DataGridTypes.SelectionChangedEvent) => {
setSelectedRowKeys(args.selectedRowKeys);
setDropDownOpened(false);
props.data.setValue(args.selectedRowKeys[0]);
};
return (
<DataGrid
dataSource={props.data.column.lookup.dataSource}
remoteOperations={true}
height={250}
selectedRowKeys={selectedRowKeys}
hoverStateEnabled={true}
onContextMenuPreparing={onContextMenuPreparing}
onSelectionChanged={onSelectionChanged}
focusedRowEnabled={true}
defaultFocusedRowKey={selectedRowKeys[0]}
>
<Column dataField="FullName" />
<Column dataField="Title" />
<Column dataField="Department" />
<Paging
enabled={true}
defaultPageSize={10}
/>
<Scrolling mode="virtual" />
<Selection mode="single" />
</DataGrid>
);
}, [props.data, selectedRowKeys]);
return (
<DropDownBox
onOptionChanged={boxOptionChanged}
opened={isDropDownOpened}
dropDownOptions={dropDownOptions}
dataSource={props.data.column.lookup.dataSource}
value={selectedRowKeys[0]}
displayExpr="FullName"
valueExpr="ID"
inputAttr={ownerLabel}
contentRender={contentRender}
></DropDownBox>
);
};
export default EmployeeDropDownBoxComponent;
import React, { useCallback } from 'react';
import TagBox, { type TagBoxTypes } from 'devextreme-react/tag-box';
const nameLabel = { 'aria-label': 'Name' };
const EmployeeTagBoxComponent = (props) => {
const onValueChanged = useCallback((e: TagBoxTypes.ValueChangedEvent) => {
props.data.setValue(e.value);
}, [props]);
const onSelectionChanged = useCallback(() => {
props.data.component.updateDimensions();
}, [props]);
return (
<TagBox
dataSource={props.data.column.lookup.dataSource}
defaultValue={props.data.value}
valueExpr="ID"
displayExpr="FullName"
showSelectionControls={true}
maxDisplayedTags={3}
inputAttr={nameLabel}
showMultiTagOnly={false}
applyValueMode="useButtons"
searchEnabled={true}
onValueChanged={onValueChanged}
onSelectionChanged={onSelectionChanged} />
);
};
export default EmployeeTagBoxComponent;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
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',
}];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'devextreme-aspnet-data-nojquery': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@5.0.0/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.6/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.24/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.64/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/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',
'@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'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': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
// eslint-disable-next-line
const useTgzInCSB = ['openai'];
import React, { useCallback, useState } 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 };
const ownerLabel = { 'aria-label': 'Owner' };
const EmployeeDropDownBoxComponent = (props) => {
const {
data: { value: dataValue },
} = props;
const initialSelectedRowKeys = dataValue !== null && dataValue !== undefined ? [dataValue] : [];
const [selectedRowKeys, setSelectedRowKeys] = useState(initialSelectedRowKeys);
const [isDropDownOpened, setDropDownOpened] = useState(false);
const boxOptionChanged = useCallback((e) => {
if (e.name === 'opened') {
setDropDownOpened(e.value);
}
}, []);
const contentRender = useCallback(() => {
const onContextMenuPreparing = (event) => {
event.items = [];
};
const onSelectionChanged = (args) => {
setSelectedRowKeys(args.selectedRowKeys);
setDropDownOpened(false);
props.data.setValue(args.selectedRowKeys[0]);
};
return (
<DataGrid
dataSource={props.data.column.lookup.dataSource}
remoteOperations={true}
height={250}
selectedRowKeys={selectedRowKeys}
hoverStateEnabled={true}
onContextMenuPreparing={onContextMenuPreparing}
onSelectionChanged={onSelectionChanged}
focusedRowEnabled={true}
defaultFocusedRowKey={selectedRowKeys[0]}
>
<Column dataField="FullName" />
<Column dataField="Title" />
<Column dataField="Department" />
<Paging
enabled={true}
defaultPageSize={10}
/>
<Scrolling mode="virtual" />
<Selection mode="single" />
</DataGrid>
);
}, [props.data, selectedRowKeys]);
return (
<DropDownBox
onOptionChanged={boxOptionChanged}
opened={isDropDownOpened}
dropDownOptions={dropDownOptions}
dataSource={props.data.column.lookup.dataSource}
value={selectedRowKeys[0]}
displayExpr="FullName"
valueExpr="ID"
inputAttr={ownerLabel}
contentRender={contentRender}
></DropDownBox>
);
};
export default EmployeeDropDownBoxComponent;
import React, { useCallback } from 'react';
import TagBox from 'devextreme-react/tag-box';
const nameLabel = { 'aria-label': 'Name' };
const EmployeeTagBoxComponent = (props) => {
const onValueChanged = useCallback(
(e) => {
props.data.setValue(e.value);
},
[props],
);
const onSelectionChanged = useCallback(() => {
props.data.component.updateDimensions();
}, [props]);
return (
<TagBox
dataSource={props.data.column.lookup.dataSource}
defaultValue={props.data.value}
valueExpr="ID"
displayExpr="FullName"
showSelectionControls={true}
maxDisplayedTags={3}
inputAttr={nameLabel}
showMultiTagOnly={false}
applyValueMode="useButtons"
searchEnabled={true}
onValueChanged={onValueChanged}
onSelectionChanged={onSelectionChanged}
/>
);
};
export default EmployeeTagBoxComponent;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
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',
},
];
<!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/25.1.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</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;
}
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.