React Migration in MultiSelect Component

This section explains how to migrate the MultiSelect component from EJ2 React to React. It provides a detailed comparison of APIs, including props and events.

Properties

EJ2 ReactReactDescription

Props: addTagOnBlur

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} addTagOnBlur={true}></MultiSelectComponent>

Props: addTagOnBlur

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} addTagOnBlur={true}></MultiSelect>

The addTagOnBlur prop is supported in both EJ2 React and React.

Props: allowCustomValue

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} allowCustomValue={true}></MultiSelectComponent>

Props: customValue

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} customValue={true}></MultiSelect>

The allowCustomValue prop in EJ2 React is replaced by customValue in React.

Props: allowObjectBinding

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; <MultiSelectComponent dataSource={countryData} fields={{ text: 'Name', value: 'Code' }} allowObjectBinding={true}></MultiSelectComponent>

Props: allowObjectBinding

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; <MultiSelect dataSource={countryData} fields={{ text: 'Name', value: 'Code' }} allowObjectBinding={true}></MultiSelect>

The allowObjectBinding prop is supported in both EJ2 React and React.

Props: cssClass

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} cssClass="custom-multiselect"></MultiSelectComponent>

Props: className

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} className="custom-multiselect"></MultiSelect>

The cssClass prop in EJ2 React is replaced by className in React.

Props: dataSource

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries}></MultiSelectComponent>

Props: dataSource

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries}></MultiSelect>

The dataSource prop is supported in both EJ2 React and React.

Props: debounceDelay

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} debounceDelay={300}></MultiSelectComponent>

Props: debounceDelay

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} debounceDelay={300}></MultiSelect>

The debounceDelay prop is supported in both EJ2 React and React.

Props: delimiterChar

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} delimiterChar=","}</MultiSelectComponent>

Props: delimiterChar

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} delimiterChar=","></MultiSelect>

The delimiterChar prop is supported in both EJ2 React and React.

Props: enabled

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} enabled={false}></MultiSelectComponent>

Props: `disabled

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} disabled></MultiSelect>

The enabled prop in EJ2 React is inverted and applied via disabled in React.

Props: fields

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; <MultiSelectComponent dataSource={countryData} fields={{ text: 'Name', value: 'Code' }}></MultiSelectComponent>

Props: fields

const countryData = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' } ]; <MultiSelect dataSource={countryData} fields={{ text: 'Name', value: 'Code' }}></MultiSelect>

The fields prop is supported in both EJ2 React and React.

Props: floatLabelType

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} placeholder="Select countries" floatLabelType="Auto"></MultiSelectComponent>

Props: labelMode

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} placeholder="Select countries" labelMode="Auto"></MultiSelect>

The floatLabelType prop in EJ2 React is replaced by labelMode in React.

Props: enableRtl

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} enableRtl={true}></MultiSelectComponent>

Props:dir(via Provider)

const countries = ['Australia', 'Bermuda', 'Canada']; <Provider dir="rtl"> <MultiSelect dataSource={countries}></MultiSelect> </Provider>

The enableRtl prop in EJ2 React is replaced by dir="rtl" on a Provider component in React.

Props: hideSelectedItem

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} hideSelectedItem={true}></MultiSelectComponent>

Props: hideSelectedItem

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} hideSelectedItem={true}></MultiSelect>

The hideSelectedItem prop is supported in both EJ2 React and React.

Props: htmlAttributes

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} htmlAttributes={{ title: 'Select countries' }}></MultiSelectComponent>

Props: inputProps

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} inputProps={{ title: 'Select countries' }}></MultiSelect>

The htmlAttributes prop in EJ2 React is replaced by inputProps in React.

Props: ignoreAccent

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} ignoreAccent={true}></MultiSelectComponent>

Props: ignoreAccent

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} ignoreAccent={true}></MultiSelect>

The ignoreAccent prop is supported in both EJ2 React and React.

Props: ignoreCase

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} ignoreCase={true}></MultiSelectComponent>

Props: ignoreCase

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} ignoreCase={true}></MultiSelect>

The ignoreCase prop is supported in both EJ2 React and React.

Props: locale

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} locale='en-US'></MultiSelectComponent>

Props:locale (via Provider)

const countries = ['Australia', 'Bermuda', 'Canada']; <Provider locale='en-US'> <MultiSelect dataSource={countries}></MultiSelect> </Provider>

The locale prop in EJ2 React is replaced by locale on a Provider component in React.

Props: maximumSelectionLength

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} maximumSelectionLength={3}></MultiSelectComponent>

Props: maximumSelectionLength

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} maximumSelectionLength={3}></MultiSelect>

The maximumSelectionLength prop is supported in both EJ2 React and React.

Props: mode

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} mode="Box"></MultiSelectComponent>

Props: mode

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} mode={DisplayMode.Box}></MultiSelect>

The mode prop is supported in both EJ2 React and React. Specifies the display mode for selected items (Box, Delimiter, Default, CheckBox).

Props: openOnClick

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} openOnClick={true}></MultiSelectComponent>

Props: openOnClick

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} openOnClick={true}></MultiSelect>

The openOnClick prop is supported in both EJ2 React and React.

Props: placeholder

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} placeholder="Select countries"></MultiSelectComponent>

Props: placeholder

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} placeholder="Select countries"></MultiSelect>

The placeholder prop is supported in both EJ2 React and React.

Props: readonly

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} readonly={true}></MultiSelectComponent>

Props:readOnly

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} readOnly></MultiSelect>

The readonly prop in EJ2 React is replaced by readOnly in React.

Props: selectAllText

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} showSelectAll={true} selectAllText="Select All"></MultiSelectComponent>

Props: selectAllText

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} showSelectAll={true} selectAllText="Select All"></MultiSelect>

The selectAllText prop is supported in both EJ2 React and React.

Props: showClearButton

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} showClearButton={true}></MultiSelectComponent>

Props: clearButton

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} clearButton={true}></MultiSelect>

The showClearButton prop in EJ2 React is replaced by clearButton in React.

Props: showSelectAll

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} showSelectAll={true}></MultiSelectComponent>

Props: showSelectAll

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} showSelectAll={true}></MultiSelect>

The showSelectAll prop is supported in both EJ2 React and React.

Props: unSelectAllText

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} showSelectAll={true} unSelectAllText="Unselect All"></MultiSelectComponent>

Props: unSelectAllText

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} showSelectAll={true} unSelectAllText="Unselect All"></MultiSelect>

The unSelectAllText prop is supported in both EJ2 React and React.

Props: value

const countries = ['Australia', 'Bermuda', 'Canada']; const selectedValues = ['AU', 'BM']; <MultiSelectComponent dataSource={countries} value={selectedValues}></MultiSelectComponent>

Props: value

const countries = ['Australia', 'Bermuda', 'Canada']; const selectedValues = ['AU', 'BM']; <MultiSelect dataSource={countries} value={selectedValues}></MultiSelect>

The value prop is supported in both EJ2 React and React.

Props: width

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelectComponent dataSource={countries} width="300px"></MultiSelectComponent>

Props:style

const countries = ['Australia', 'Bermuda', 'Canada']; <MultiSelect dataSource={countries} style={{ width: '300px' }}></MultiSelect>

The width prop in EJ2 React is replaced by style in React.

Events

EJ2 ReactReactDescription

Event: change

const countries = ['Australia', 'Bermuda', 'Canada']; const handleChange = (args) => { console.log('Value changed:', args.value); }; <MultiSelectComponent dataSource={countries} change={handleChange}></MultiSelectComponent>

Event: onChange

const countries = ['Australia', 'Bermuda', 'Canada']; const handleChange = (args) => { console.log('Value changed:', args.value); }; <MultiSelect dataSource={countries} onChange={handleChange}></MultiSelect>

The change event in EJ2 React is replaced by onChange in React. Fires when the selected values change.

Event: chipSelection

const countries = ['Australia', 'Bermuda', 'Canada']; const handleChipSelection = (args) => { console.log('Chip selected'); }; <MultiSelectComponent dataSource={countries} chipSelection={handleChipSelection}></MultiSelectComponent>

Event: onChipClick

const countries = ['Australia', 'Bermuda', 'Canada']; const handleChipClick = (args) => { console.log('Chip clicked'); }; <MultiSelect dataSource={countries} onChipClick={handleChipClick}></MultiSelect>

The chipSelection event in EJ2 React is replaced by onChipClick in React. Fires when a chip is clicked.

Event: removed

const countries = ['Australia', 'Bermuda', 'Canada']; const handleRemoved = (args) => { console.log('Item removed:', args.item); }; <MultiSelectComponent dataSource={countries} removed={handleRemoved}></MultiSelectComponent>

Event: onChipDelete

const countries = ['Australia', 'Bermuda', 'Canada']; const handleChipDelete = (item) => { console.log('Chip deleted:', item); }; <MultiSelect dataSource={countries} onChipDelete={handleChipDelete}></MultiSelect>

The removed event in EJ2 React is replaced by onChipDelete in React. Fires after a chip item is removed from the input.

Event: customValueSelection

const countries = ['Australia', 'Bermuda', 'Canada']; const handleCustomValue = (args) => { console.log('Custom value selected:', args.value); }; <MultiSelectComponent dataSource={countries} allowCustomValue={true} customValueSelection={handleCustomValue}></MultiSelectComponent>

Event: onCustomValueSelect

const countries = ['Australia', 'Bermuda', 'Canada']; const handleCustomValue = (value) => { console.log('Custom value selected:', value); }; <MultiSelect dataSource={countries} customValue={true} onCustomValueSelect={handleCustomValue}></MultiSelect>

The customValueSelection event in EJ2 React is replaced by onCustomValueSelect in React. Fires when a custom value is committed via Enter key.

Event: selectedAll

const countries = ['Australia', 'Bermuda', 'Canada']; const handleSelectedAll = (args) => { console.log('All items selected'); }; <MultiSelectComponent dataSource={countries} showSelectAll={true} selectedAll={handleSelectedAll}></MultiSelectComponent>

Event: onSelectAll

const countries = ['Australia', 'Bermuda', 'Canada']; const handleSelectAll = (event) => { console.log('All items selected'); }; <MultiSelect dataSource={countries} showSelectAll={true} onSelectAll={handleSelectAll}></MultiSelect>

The selectedAll event in EJ2 React is replaced by onSelectAll in React. Fires when all items are selected or deselected using the select all option.