Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React, { useCallback, useState } from 'react';
import { SimplifiedSearchMode } from 'devextreme-react/common';
import { SelectBox, SelectBoxTypes } from 'devextreme-react/select-box';
import { NumberBox } from 'devextreme-react/number-box';
import { CheckBox } from 'devextreme-react/check-box';
import DataSource from 'devextreme/data/data_source';
import {
simpleProducts,
products,
searchTimeoutLabel,
minimumSearchLengthLabel,
searchExpressionLabel,
searchModeLabel,
productLabel,
simpleProductLabel,
} from './data.ts';
const searchModeItems = ['contains', 'startswith'];
const searchExprItems = [
{
name: '\'Name\'',
value: 'Name',
},
{
name: '[\'Name\', \'Category\']',
value: ['Name', 'Category'],
},
];
const productsDataSource = new DataSource({
store: {
data: simpleProducts,
type: 'array',
key: 'ID',
},
});
const customItemCreating = (args: SelectBoxTypes.CustomItemCreatingEvent) => {
if (!args.text) {
args.customItem = null;
return;
}
const productIds = simpleProducts.map((item) => item.ID);
const incrementedId = Math.max.apply(null, productIds) + 1;
const newItem = {
Name: args.text,
ID: incrementedId,
};
args.customItem = productsDataSource
.store()
.insert(newItem)
.then(() => productsDataSource.load())
.then(() => newItem)
.catch((error) => {
throw error;
});
};
function App() {
const [editBoxValue, setEditBoxValue] = useState(simpleProducts[0]);
const [searchModeOption, setSearchModeOption] = useState<SimplifiedSearchMode>('contains');
const [searchExprOption, setSearchExprOption] = useState('Name');
const [searchTimeoutOption, setSearchTimeoutOption] = useState(200);
const [minSearchLengthOption, setMinSearchLengthOption] = useState(0);
const [showDataBeforeSearchOption, setShowDataBeforeSearchOption] = useState(false);
const editBoxValueChanged = useCallback(({ component }) => {
setEditBoxValue(component.option('selectedItem'));
}, []);
const searchModeOptionChanged = useCallback(({ value }) => {
setSearchModeOption(value);
}, []);
const searchExprOptionChanged = useCallback(({ value }) => {
setSearchExprOption(value);
}, []);
const searchTimeoutOptionChanged = useCallback(({ value }) => {
setSearchTimeoutOption(value);
}, []);
const minSearchLengthOptionChanged = useCallback(({ value }) => {
setMinSearchLengthOption(value);
}, []);
const showDataBeforeSearchOptionChanged = useCallback(({ value }) => {
setShowDataBeforeSearchOption(value);
}, []);
return (
<div id="selectbox-demo">
<div className="widget-container">
<div className="dx-fieldset">
<div className="dx-fieldset-header">SearchBox</div>
<div className="dx-field">
<div className="dx-field-label">Product</div>
<div className="dx-field-value">
<SelectBox
dataSource={products}
displayExpr="Name"
searchEnabled={true}
inputAttr={simpleProductLabel}
searchMode={searchModeOption}
searchExpr={searchExprOption}
searchTimeout={searchTimeoutOption}
minSearchLength={minSearchLengthOption}
showDataBeforeSearch={showDataBeforeSearchOption}
/>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-fieldset-header">EditBox</div>
<div className="dx-field">
<div className="dx-field-label">Product</div>
<div className="dx-field-value">
<SelectBox
dataSource={productsDataSource}
displayExpr="Name"
valueExpr="ID"
inputAttr={productLabel}
acceptCustomValue={true}
defaultValue={simpleProducts[0].ID}
onCustomItemCreating={customItemCreating}
onValueChanged={editBoxValueChanged}
/>
</div>
</div>
<div className="dx-field current-product">
Current product:{' '}
<span className="current-value">
{editBoxValue ? `${editBoxValue.Name} (ID: ${editBoxValue.ID})` : 'Not selected'}
</span>
</div>
</div>
</div>
<div className="options">
<div className="caption">SearchBox Options</div>
<div className="option">
<div>Search Mode</div>
<SelectBox
items={searchModeItems}
value={searchModeOption}
inputAttr={searchModeLabel}
onValueChanged={searchModeOptionChanged}
/>
</div>
<div className="option">
<div>Search Expression</div>
<SelectBox
items={searchExprItems}
displayExpr="name"
valueExpr="value"
inputAttr={searchExpressionLabel}
value={searchExprOption}
onValueChanged={searchExprOptionChanged}
/>
</div>
<div className="option">
<div>Search Timeout</div>
<NumberBox
min={0}
max={5000}
showSpinButtons={true}
step={100}
value={searchTimeoutOption}
inputAttr={searchTimeoutLabel}
onValueChanged={searchTimeoutOptionChanged}
/>
</div>
<div className="option">
<div>Minimum Search Length</div>
<NumberBox
min={0}
max={5}
showSpinButtons={true}
value={minSearchLengthOption}
inputAttr={minimumSearchLengthLabel}
onValueChanged={minSearchLengthOptionChanged}
/>
</div>
<div className="option">
<CheckBox
text="Show Data Before Search"
value={showDataBeforeSearchOption}
onValueChanged={showDataBeforeSearchOptionChanged}
/>
</div>
</div>
</div>
);
}
export default App;
import React, { useCallback, useState } from 'react';
import { SelectBox } from 'devextreme-react/select-box';
import { NumberBox } from 'devextreme-react/number-box';
import { CheckBox } from 'devextreme-react/check-box';
import DataSource from 'devextreme/data/data_source';
import {
simpleProducts,
products,
searchTimeoutLabel,
minimumSearchLengthLabel,
searchExpressionLabel,
searchModeLabel,
productLabel,
simpleProductLabel,
} from './data.js';
const searchModeItems = ['contains', 'startswith'];
const searchExprItems = [
{
name: "'Name'",
value: 'Name',
},
{
name: "['Name', 'Category']",
value: ['Name', 'Category'],
},
];
const productsDataSource = new DataSource({
store: {
data: simpleProducts,
type: 'array',
key: 'ID',
},
});
const customItemCreating = (args) => {
if (!args.text) {
args.customItem = null;
return;
}
const productIds = simpleProducts.map((item) => item.ID);
const incrementedId = Math.max.apply(null, productIds) + 1;
const newItem = {
Name: args.text,
ID: incrementedId,
};
args.customItem = productsDataSource
.store()
.insert(newItem)
.then(() => productsDataSource.load())
.then(() => newItem)
.catch((error) => {
throw error;
});
};
function App() {
const [editBoxValue, setEditBoxValue] = useState(simpleProducts[0]);
const [searchModeOption, setSearchModeOption] = useState('contains');
const [searchExprOption, setSearchExprOption] = useState('Name');
const [searchTimeoutOption, setSearchTimeoutOption] = useState(200);
const [minSearchLengthOption, setMinSearchLengthOption] = useState(0);
const [showDataBeforeSearchOption, setShowDataBeforeSearchOption] = useState(false);
const editBoxValueChanged = useCallback(({ component }) => {
setEditBoxValue(component.option('selectedItem'));
}, []);
const searchModeOptionChanged = useCallback(({ value }) => {
setSearchModeOption(value);
}, []);
const searchExprOptionChanged = useCallback(({ value }) => {
setSearchExprOption(value);
}, []);
const searchTimeoutOptionChanged = useCallback(({ value }) => {
setSearchTimeoutOption(value);
}, []);
const minSearchLengthOptionChanged = useCallback(({ value }) => {
setMinSearchLengthOption(value);
}, []);
const showDataBeforeSearchOptionChanged = useCallback(({ value }) => {
setShowDataBeforeSearchOption(value);
}, []);
return (
<div id="selectbox-demo">
<div className="widget-container">
<div className="dx-fieldset">
<div className="dx-fieldset-header">SearchBox</div>
<div className="dx-field">
<div className="dx-field-label">Product</div>
<div className="dx-field-value">
<SelectBox
dataSource={products}
displayExpr="Name"
searchEnabled={true}
inputAttr={simpleProductLabel}
searchMode={searchModeOption}
searchExpr={searchExprOption}
searchTimeout={searchTimeoutOption}
minSearchLength={minSearchLengthOption}
showDataBeforeSearch={showDataBeforeSearchOption}
/>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-fieldset-header">EditBox</div>
<div className="dx-field">
<div className="dx-field-label">Product</div>
<div className="dx-field-value">
<SelectBox
dataSource={productsDataSource}
displayExpr="Name"
valueExpr="ID"
inputAttr={productLabel}
acceptCustomValue={true}
defaultValue={simpleProducts[0].ID}
onCustomItemCreating={customItemCreating}
onValueChanged={editBoxValueChanged}
/>
</div>
</div>
<div className="dx-field current-product">
Current product:{' '}
<span className="current-value">
{editBoxValue ? `${editBoxValue.Name} (ID: ${editBoxValue.ID})` : 'Not selected'}
</span>
</div>
</div>
</div>
<div className="options">
<div className="caption">SearchBox Options</div>
<div className="option">
<div>Search Mode</div>
<SelectBox
items={searchModeItems}
value={searchModeOption}
inputAttr={searchModeLabel}
onValueChanged={searchModeOptionChanged}
/>
</div>
<div className="option">
<div>Search Expression</div>
<SelectBox
items={searchExprItems}
displayExpr="name"
valueExpr="value"
inputAttr={searchExpressionLabel}
value={searchExprOption}
onValueChanged={searchExprOptionChanged}
/>
</div>
<div className="option">
<div>Search Timeout</div>
<NumberBox
min={0}
max={5000}
showSpinButtons={true}
step={100}
value={searchTimeoutOption}
inputAttr={searchTimeoutLabel}
onValueChanged={searchTimeoutOptionChanged}
/>
</div>
<div className="option">
<div>Minimum Search Length</div>
<NumberBox
min={0}
max={5}
showSpinButtons={true}
value={minSearchLengthOption}
inputAttr={minimumSearchLengthLabel}
onValueChanged={minSearchLengthOptionChanged}
/>
</div>
<div className="option">
<CheckBox
text="Show Data Before Search"
value={showDataBeforeSearchOption}
onValueChanged={showDataBeforeSearchOptionChanged}
/>
</div>
</div>
</div>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(<App />, document.getElementById('app'));
export const simpleProducts = [
{ Name: 'HD Video Player', ID: 0 },
{ Name: 'SuperHD Video Player', ID: 1 },
{ Name: 'SuperPlasma 50', ID: 2 },
{ Name: 'SuperLED 50', ID: 3 },
{ Name: 'SuperLED 42', ID: 4 },
{ Name: 'SuperLCD 55', ID: 5 },
{ Name: 'SuperLCD 42', ID: 6 },
{ Name: 'SuperPlasma 65', ID: 7 },
{ Name: 'SuperLCD 70', ID: 8 },
{ Name: 'Projector Plus', ID: 9 },
{ Name: 'Projector PlusHT', ID: 10 },
{ Name: 'ExcelRemote IR', ID: 11 },
{ Name: 'ExcelRemote Bluetooth', ID: 12 },
{ Name: 'ExcelRemote IP', ID: 13 },
];
export const products = [{
ID: 1,
Name: 'HD Video Player',
Price: 330,
Current_Inventory: 225,
Backorder: 0,
Manufacturing: 10,
Category: 'Video Players',
ImageSrc: '../../../../images/products/1.png',
}, {
ID: 2,
Name: 'SuperHD Video Player',
Price: 400,
Current_Inventory: 150,
Backorder: 0,
Manufacturing: 25,
Category: 'Video Players',
ImageSrc: '../../../../images/products/2.png',
}, {
ID: 3,
Name: 'SuperPlasma 50',
Price: 2400,
Current_Inventory: 0,
Backorder: 0,
Manufacturing: 0,
Category: 'Televisions',
ImageSrc: '../../../../images/products/3.png',
}, {
ID: 4,
Name: 'SuperLED 50',
Price: 1600,
Current_Inventory: 77,
Backorder: 0,
Manufacturing: 55,
Category: 'Televisions',
ImageSrc: '../../../../images/products/4.png',
}, {
ID: 5,
Name: 'SuperLED 42',
Price: 1450,
Current_Inventory: 445,
Backorder: 0,
Manufacturing: 0,
Category: 'Televisions',
ImageSrc: '../../../../images/products/5.png',
}, {
ID: 6,
Name: 'SuperLCD 55',
Price: 1350,
Current_Inventory: 345,
Backorder: 0,
Manufacturing: 5,
Category: 'Televisions',
ImageSrc: '../../../../images/products/6.png',
}, {
ID: 7,
Name: 'SuperLCD 42',
Price: 1200,
Current_Inventory: 210,
Backorder: 0,
Manufacturing: 20,
Category: 'Televisions',
ImageSrc: '../../../../images/products/7.png',
}, {
ID: 8,
Name: 'SuperPlasma 65',
Price: 3500,
Current_Inventory: 0,
Backorder: 0,
Manufacturing: 0,
Category: 'Televisions',
ImageSrc: '../../../../images/products/8.png',
}, {
ID: 9,
Name: 'SuperLCD 70',
Price: 4000,
Current_Inventory: 95,
Backorder: 0,
Manufacturing: 5,
Category: 'Televisions',
ImageSrc: '../../../../images/products/9.png',
}, {
ID: 10,
Name: 'DesktopLED 21',
Price: 175,
Current_Inventory: null,
Backorder: 425,
Manufacturing: 75,
Category: 'Monitors',
ImageSrc: '../../../../images/products/10.png',
}, {
ID: 12,
Name: 'DesktopLCD 21',
Price: 170,
Current_Inventory: 210,
Backorder: 0,
Manufacturing: 60,
Category: 'Monitors',
ImageSrc: '../../../../images/products/12.png',
}, {
ID: 13,
Name: 'DesktopLCD 19',
Price: 160,
Current_Inventory: 150,
Backorder: 0,
Manufacturing: 210,
Category: 'Monitors',
ImageSrc: '../../../../images/products/13.png',
}, {
ID: 14,
Name: 'Projector Plus',
Price: 550,
Current_Inventory: null,
Backorder: 55,
Manufacturing: 10,
Category: 'Projectors',
ImageSrc: '../../../../images/products/14.png',
}, {
ID: 15,
Name: 'Projector PlusHD',
Price: 750,
Current_Inventory: 110,
Backorder: 0,
Manufacturing: 90,
Category: 'Projectors',
ImageSrc: '../../../../images/products/15.png',
}, {
ID: 16,
Name: 'Projector PlusHT',
Price: 1050,
Current_Inventory: 0,
Backorder: 75,
Manufacturing: 57,
Category: 'Projectors',
ImageSrc: '../../../../images/products/16.png',
}, {
ID: 17,
Name: 'ExcelRemote IR',
Price: 150,
Current_Inventory: 650,
Backorder: 0,
Manufacturing: 190,
Category: 'Automation',
ImageSrc: '../../../../images/products/17.png',
}, {
ID: 18,
Name: 'ExcelRemote Bluetooth',
Price: 180,
Current_Inventory: 310,
Backorder: 0,
Manufacturing: 0,
Category: 'Automation',
ImageSrc: '../../../../images/products/18.png',
}, {
ID: 19,
Name: 'ExcelRemote IP',
Price: 200,
Current_Inventory: 0,
Backorder: 325,
Manufacturing: 225,
Category: 'Automation',
ImageSrc: '../../../../images/products/19.png',
}];
export const minimumSearchLengthLabel = { 'aria-label': 'Minumum Search length' };
export const searchTimeoutLabel = { 'aria-label': 'Search Timeout' };
export const searchExpressionLabel = { 'aria-label': 'Search Expression' };
export const searchModeLabel = { 'aria-label': 'Search Mode' };
export const productLabel = { 'aria-label': 'Product' };
export const simpleProductLabel = { 'aria-label': 'Simple Product' };
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,
},
},
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',
'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@24.1.7/cjs',
'devextreme-react': 'npm:devextreme-react@24.1.7/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.13/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'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.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/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',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const simpleProducts = [
{ Name: 'HD Video Player', ID: 0 },
{ Name: 'SuperHD Video Player', ID: 1 },
{ Name: 'SuperPlasma 50', ID: 2 },
{ Name: 'SuperLED 50', ID: 3 },
{ Name: 'SuperLED 42', ID: 4 },
{ Name: 'SuperLCD 55', ID: 5 },
{ Name: 'SuperLCD 42', ID: 6 },
{ Name: 'SuperPlasma 65', ID: 7 },
{ Name: 'SuperLCD 70', ID: 8 },
{ Name: 'Projector Plus', ID: 9 },
{ Name: 'Projector PlusHT', ID: 10 },
{ Name: 'ExcelRemote IR', ID: 11 },
{ Name: 'ExcelRemote Bluetooth', ID: 12 },
{ Name: 'ExcelRemote IP', ID: 13 },
];
export const products = [
{
ID: 1,
Name: 'HD Video Player',
Price: 330,
Current_Inventory: 225,
Backorder: 0,
Manufacturing: 10,
Category: 'Video Players',
ImageSrc: '../../../../images/products/1.png',
},
{
ID: 2,
Name: 'SuperHD Video Player',
Price: 400,
Current_Inventory: 150,
Backorder: 0,
Manufacturing: 25,
Category: 'Video Players',
ImageSrc: '../../../../images/products/2.png',
},
{
ID: 3,
Name: 'SuperPlasma 50',
Price: 2400,
Current_Inventory: 0,
Backorder: 0,
Manufacturing: 0,
Category: 'Televisions',
ImageSrc: '../../../../images/products/3.png',
},
{
ID: 4,
Name: 'SuperLED 50',
Price: 1600,
Current_Inventory: 77,
Backorder: 0,
Manufacturing: 55,
Category: 'Televisions',
ImageSrc: '../../../../images/products/4.png',
},
{
ID: 5,
Name: 'SuperLED 42',
Price: 1450,
Current_Inventory: 445,
Backorder: 0,
Manufacturing: 0,
Category: 'Televisions',
ImageSrc: '../../../../images/products/5.png',
},
{
ID: 6,
Name: 'SuperLCD 55',
Price: 1350,
Current_Inventory: 345,
Backorder: 0,
Manufacturing: 5,
Category: 'Televisions',
ImageSrc: '../../../../images/products/6.png',
},
{
ID: 7,
Name: 'SuperLCD 42',
Price: 1200,
Current_Inventory: 210,
Backorder: 0,
Manufacturing: 20,
Category: 'Televisions',
ImageSrc: '../../../../images/products/7.png',
},
{
ID: 8,
Name: 'SuperPlasma 65',
Price: 3500,
Current_Inventory: 0,
Backorder: 0,
Manufacturing: 0,
Category: 'Televisions',
ImageSrc: '../../../../images/products/8.png',
},
{
ID: 9,
Name: 'SuperLCD 70',
Price: 4000,
Current_Inventory: 95,
Backorder: 0,
Manufacturing: 5,
Category: 'Televisions',
ImageSrc: '../../../../images/products/9.png',
},
{
ID: 10,
Name: 'DesktopLED 21',
Price: 175,
Current_Inventory: null,
Backorder: 425,
Manufacturing: 75,
Category: 'Monitors',
ImageSrc: '../../../../images/products/10.png',
},
{
ID: 12,
Name: 'DesktopLCD 21',
Price: 170,
Current_Inventory: 210,
Backorder: 0,
Manufacturing: 60,
Category: 'Monitors',
ImageSrc: '../../../../images/products/12.png',
},
{
ID: 13,
Name: 'DesktopLCD 19',
Price: 160,
Current_Inventory: 150,
Backorder: 0,
Manufacturing: 210,
Category: 'Monitors',
ImageSrc: '../../../../images/products/13.png',
},
{
ID: 14,
Name: 'Projector Plus',
Price: 550,
Current_Inventory: null,
Backorder: 55,
Manufacturing: 10,
Category: 'Projectors',
ImageSrc: '../../../../images/products/14.png',
},
{
ID: 15,
Name: 'Projector PlusHD',
Price: 750,
Current_Inventory: 110,
Backorder: 0,
Manufacturing: 90,
Category: 'Projectors',
ImageSrc: '../../../../images/products/15.png',
},
{
ID: 16,
Name: 'Projector PlusHT',
Price: 1050,
Current_Inventory: 0,
Backorder: 75,
Manufacturing: 57,
Category: 'Projectors',
ImageSrc: '../../../../images/products/16.png',
},
{
ID: 17,
Name: 'ExcelRemote IR',
Price: 150,
Current_Inventory: 650,
Backorder: 0,
Manufacturing: 190,
Category: 'Automation',
ImageSrc: '../../../../images/products/17.png',
},
{
ID: 18,
Name: 'ExcelRemote Bluetooth',
Price: 180,
Current_Inventory: 310,
Backorder: 0,
Manufacturing: 0,
Category: 'Automation',
ImageSrc: '../../../../images/products/18.png',
},
{
ID: 19,
Name: 'ExcelRemote IP',
Price: 200,
Current_Inventory: 0,
Backorder: 325,
Manufacturing: 225,
Category: 'Automation',
ImageSrc: '../../../../images/products/19.png',
},
];
export const minimumSearchLengthLabel = { 'aria-label': 'Minumum Search length' };
export const searchTimeoutLabel = { 'aria-label': 'Search Timeout' };
export const searchExpressionLabel = { 'aria-label': 'Search Expression' };
export const searchModeLabel = { 'aria-label': 'Search Mode' };
export const productLabel = { 'aria-label': 'Product' };
export const simpleProductLabel = { 'aria-label': 'Simple Product' };
<!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/24.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.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>
.widget-container {
margin-right: 320px;
}
.current-product {
padding-top: 11px;
}
.current-value {
font-weight: bold;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 260px;
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 10px;
}
The following properties help you configure the feature:
- searchExpr
Specifies one or several data fields to search. - searchMode
Specifies whether found items should contain the typed-in string or start with it. - searchTimeout
Specifies the delay between the moment a user stops typing and the moment the search is executed. - minSearchLength
Specifies the minimum number of characters that a user should type in to trigger the search. - showDataBeforeSearch
Specifies whether the SelectBox should display the unfiltered item list until a user have typed in the minimum number of characters (minSearchLength).
Set the acceptCustomValue property to true to allow users to add values to the SelectBox. You should also implement the onCustomItemCreating handler to create new data source entries.