import React from 'react';
import DataGrid, {
Paging,
HeaderFilter,
SearchPanel,
Editing,
Column,
Lookup,
RequiredRule,
DataGridTypes,
} from 'devextreme-react/data-grid';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import SelectBox, { 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/Mvc/api/CustomEditors';
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} />
<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,
} 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/Mvc/api/CustomEditors';
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}
/>
<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,
DataGridTypes,
Paging,
Scrolling,
Selection,
} from 'devextreme-react/data-grid';
import DropDownBox, { DropDownBoxTypes } from 'devextreme-react/drop-down-box';
const dropDownOptions = { width: 500 };
const ownerLabel = { 'aria-label': 'Owner' };
const EmployeeDropDownBoxComponent = (props) => {
const [selectedRowKeys, setSelectedRowKeys] = useState([props.data.value]);
const [isDropDownOpened, setDropDownOpened] = useState(false);
const boxOptionChanged = useCallback((e: DropDownBoxTypes.OptionChangedEvent) => {
if (e.name === 'opened') {
setDropDownOpened(e.value);
}
}, []);
const contentRender = useCallback(() => {
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}
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, { 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,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.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@15.8.1/prop-types.js',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@3.0.0/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.2.6/cjs',
'devextreme-react': 'npm:devextreme-react@23.2.6/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/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',
'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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: '',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
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 [selectedRowKeys, setSelectedRowKeys] = useState([props.data.value]);
const [isDropDownOpened, setDropDownOpened] = useState(false);
const boxOptionChanged = useCallback((e) => {
if (e.name === 'opened') {
setDropDownOpened(e.value);
}
}, []);
const contentRender = useCallback(() => {
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}
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>
<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.2.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<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.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;
}