React Migration in ComboBox Component

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

Properties

EJ2 ReactReactDescription

Props: allowCustom

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} allowCustom={true}></ComboBoxComponent>

Props: customValue

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} customValue={true}></ComboBox>

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

Props: allowFiltering

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} allowFiltering={true}></ComboBoxComponent>

Props: filterable

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} filterable={true}></ComboBox>

The allowFiltering prop in EJ2 React is replaced by filterable in React.

Props: allowObjectBinding

const gameData = [ { Name: 'Cricket', Code: 'CR' }, { Name: 'Football', Code: 'FB' } ]; const selectedObj = { Name: 'Cricket', Code: 'CR' }; <ComboBoxComponent dataSource={gameData} value={selectedObj} allowObjectBinding={true}></ComboBoxComponent>

Props: allowObjectBinding

const gameData = [ { Name: 'Cricket', Code: 'CR' }, { Name: 'Football', Code: 'FB' } ]; const selectedObj = { Name: 'Cricket', Code: 'CR' }; <ComboBox dataSource={gameData} value={selectedObj} allowObjectBinding={true}></ComboBox>

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

Props: autofill

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} autofill={true}></ComboBoxComponent>

Props: autofill

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} autofill={true}></ComboBox>

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

Props: cssClass

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} cssClass="custom-combobox"></ComboBoxComponent>

Props: className

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} className="custom-combobox"></ComboBox>

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

Props: dataSource

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games}></ComboBoxComponent>

Props: dataSource

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games}></ComboBox>

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

Props: debounceDelay

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} debounceDelay={300}></ComboBoxComponent>

Props: debounceDelay

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} debounceDelay={300}></ComboBox>

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

Props: enabled

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} enabled={false}></ComboBoxComponent>

Props: disabled

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} disabled></ComboBox>

The enabled prop in EJ2 React is inverted as disabled in React.

Props: enableRtl

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} enableRtl={true}></ComboBoxComponent>

Props: dir (via Provider)

const games = ['Cricket', 'Football', 'Basketball']; <Provider dir="rtl"> <ComboBox dataSource={games}></ComboBox> </Provider>

The enableRtl prop is supplied via dir="rtl" on a Provider in React.

Props: enableVirtualization

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} enableVirtualization={true}></ComboBoxComponent>

Props: virtualization

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} virtualization={{ itemHeight: 48 }}></ComboBox>

The enableVirtualization prop is replaced by virtualization in React.

Props: fields

const gameData = [ { Name: 'Cricket', Code: 'CR' }, { Name: 'Football', Code: 'FB' } ]; <ComboBoxComponent dataSource={gameData} fields={{ text: 'Name', value: 'Code' }}></ComboBoxComponent>

Props: fields

const gameData = [ { Name: 'Cricket', Code: 'CR' }, { Name: 'Football', Code: 'FB' } ]; <ComboBox dataSource={gameData} fields={{ text: 'Name', value: 'Code' }}></ComboBox>

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

Props: filterType

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} allowFiltering={true} filterType="StartsWith"></ComboBoxComponent>

Props: filterType

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} filterable={true} filterType="StartsWith"></ComboBox>

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

Props: floatLabelType

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} placeholder="Select a game" floatLabelType="Auto"></ComboBoxComponent>

Props: labelMode

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} placeholder="Select a game" labelMode="Auto"></ComboBox>

The floatLabelType prop is replaced by labelMode in React.

Props: footerTemplate

const games = ['Cricket', 'Football', 'Basketball']; const FooterTemplate = () => <div>Add New Game</div>; <ComboBoxComponent dataSource={games} footerTemplate={<FooterTemplate />}></ComboBoxComponent>

Props: footerTemplate

const games = ['Cricket', 'Football', 'Basketball']; const FooterTemplate = () => <div>Add New Game</div>; <ComboBox dataSource={games} footerTemplate={<FooterTemplate />}></ComboBox>

The footerTemplate prop accepts a React node in React.

Props: groupTemplate

const gameData = [ { Name: 'Cricket', Category: 'Sport' }, { Name: 'Football', Category: 'Sport' } ]; const GroupTemplate = ({ data }) => <div>{data.Category}</div>; <ComboBoxComponent dataSource={gameData} groupTemplate={<GroupTemplate />}></ComboBoxComponent>

Props: groupTemplate

const gameData = [ { Name: 'Cricket', Category: 'Sport' }, { Name: 'Football', Category: 'Sport' } ]; const GroupTemplate = ({ data }) => <div>{data.Category}</div>; <ComboBox dataSource={gameData} groupTemplate={<GroupTemplate />}></ComboBox>

The groupTemplate prop accepts a React node in React.

Props: headerTemplate

const games = ['Cricket', 'Football', 'Basketball']; const HeaderTemplate = () => <div>Select a Game</div>; <ComboBoxComponent dataSource={games} headerTemplate={<HeaderTemplate />}></ComboBoxComponent>

Props: headerTemplate

const games = ['Cricket', 'Football', 'Basketball']; const HeaderTemplate = () => <div>Select a Game</div>; <ComboBox dataSource={games} headerTemplate={<HeaderTemplate />}></ComboBox>

The headerTemplate prop accepts a React node in React.

Props: htmlAttributes

const games = ['Cricket', 'Football', 'Basketball']; const htmlAttributes = { name: 'games', title: 'Select a game' }; <ComboBoxComponent dataSource={games} htmlAttributes={htmlAttributes}></ComboBoxComponent>

Props: inputProps

const games = ['Cricket', 'Football', 'Basketball']; const inputProps = { name: 'games', title: 'Select a game' }; <ComboBox dataSource={games} inputProps={inputProps}></ComboBox>

The htmlAttributes prop is replaced by inputProps in React.

Props: ignoreAccent

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} ignoreAccent={true}></ComboBoxComponent>

Props: ignoreAccent

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} ignoreAccent={true}></ComboBox>

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

Props: ignoreCase

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} ignoreCase={false}></ComboBoxComponent>

Props: ignoreCase

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} ignoreCase={false}></ComboBox>

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

Props: itemTemplate

const gameData = [ { Name: 'Cricket', Code: 'CR' }, { Name: 'Football', Code: 'FB' } ]; const ItemTemplate = ({ data }) => <span>{data.Name} - {data.Code}</span>; <ComboBoxComponent dataSource={gameData} fields={{ text: 'Name', value: 'Code' }} itemTemplate={<ItemTemplate />}></ComboBoxComponent>

Props: itemTemplate

const gameData = [ { Name: 'Cricket', Code: 'CR' }, { Name: 'Football', Code: 'FB' } ]; const ItemTemplate = ({ data }) => <span>{data.Name} - {data.Code}</span>; <ComboBox dataSource={gameData} fields={{ text: 'Name', value: 'Code' }} itemTemplate={<ItemTemplate />}></ComboBox>

The itemTemplate prop accepts a React node in React.

Props: locale

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} locale='en-US'></ComboBoxComponent>

Props: locale (via Provider)

const games = ['Cricket', 'Football', 'Basketball']; <Provider locale='en-US'> <ComboBox dataSource={games}></ComboBox> </Provider>

The locale prop is supplied via a Provider in React.

Props: noRecordsTemplate

<ComboBoxComponent dataSource={[]} noRecordsTemplate={<div>No records found</div>}></ComboBoxComponent>

Props: noRecordsTemplate

<ComboBox dataSource={[]} noRecordsTemplate={<div>No records found</div>}></ComboBox>

The noRecordsTemplate prop accepts a React node in React.

Props: placeholder

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} placeholder="Select a game"></ComboBoxComponent>

Props: placeholder

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} placeholder="Select a game"></ComboBox>

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

Props: popupHeight and popupWidth

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} popupHeight="400px" popupWidth="300px"></ComboBoxComponent>

Props: popupSettings

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} popupSettings={{ height: '400px', width: '300px' }}></ComboBox>

The popupHeight and popupWidth props are replaced by popupSettings in React.

Props: readonly

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} readonly={true}></ComboBoxComponent>

Props: readOnly

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} readOnly></ComboBox>

The readonly prop in EJ2 React is readOnly in React.

Props: required

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} required={true}></ComboBoxComponent>

Props: required

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} required></ComboBox>

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

Props: showClearButton

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} showClearButton={true}></ComboBoxComponent>

Props: clearButton

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} clearButton={true}></ComboBox>

The showClearButton prop is replaced by clearButton in React.

Props: sortOrder

const games = ['Cricket', 'Football', 'Basketball']; <ComboBoxComponent dataSource={games} sortOrder="Ascending"></ComboBoxComponent>

Props: sortOrder

const games = ['Cricket', 'Football', 'Basketball']; <ComboBox dataSource={games} sortOrder={SortOrder.Ascending}></ComboBox>

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

Props: value

const games = ['Cricket', 'Football', 'Basketball']; const selectedValue = 'Cricket'; <ComboBoxComponent dataSource={games} value='Cricket'></ComboBoxComponent>

Props: value

const games = ['Cricket', 'Football', 'Basketball']; const selectedValue = 'Cricket'; <ComboBox dataSource={games} value={selectedValue}></ComboBox>

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

Events

EJ2 ReactReactDescription

Event: actionBegin

const games = ['Cricket', 'Football', 'Basketball']; const handleActionBegin = (args) => { console.log('Data request started'); }; <ComboBoxComponent dataSource={games} actionBegin={handleActionBegin}></ComboBoxComponent>

Event: onDataRequest

const games = ['Cricket', 'Football', 'Basketball']; const handleDataRequest = (args) => { console.log('Data request started'); }; <ComboBox dataSource={games} onDataRequest={handleDataRequest}></ComboBox>

The actionBegin event in EJ2 React is replaced by onDataRequest in React and fires on data request.

Event: actionComplete

const games = ['Cricket', 'Football', 'Basketball']; const handleActionComplete = (args) => { console.log('Data fetched successfully'); }; <ComboBoxComponent dataSource={games} actionComplete={handleActionComplete}></ComboBoxComponent>

Event: onDataLoad

const games = ['Cricket', 'Football', 'Basketball']; const handleDataLoad = (args) => { console.log('Data fetched successfully'); }; <ComboBox dataSource={games} onDataLoad={handleDataLoad}></ComboBox>

The actionComplete event in EJ2 React is replaced by onDataLoad in React and fires on data load.

Event: actionFailure

const games = ['Cricket', 'Football', 'Basketball']; const handleActionFailure = (args) => { console.log('Data fetch failed'); }; <ComboBoxComponent dataSource={games} actionFailure={handleActionFailure}></ComboBoxComponent>

Event: onError

const games = ['Cricket', 'Football', 'Basketball']; const handleError = (args) => { console.log('Data fetch failed'); }; <ComboBox dataSource={games} onError={handleError}></ComboBox>

The actionFailure event in EJ2 React is replaced by onError in React and fires on data load error.

Event: change

const games = ['Cricket', 'Football', 'Basketball']; const handleChange = (args) => { console.log('Value changed:', args.value); }; <ComboBoxComponent dataSource={games} change={handleChange}></ComboBoxComponent>

Event: onChange

const games = ['Cricket', 'Football', 'Basketball']; const handleChange = (args) => { console.log('Value changed:', args.value); }; <ComboBox dataSource={games} onChange={handleChange}></ComboBox>

The change event in EJ2 React is replaced by onChange in React and fires on value change.

Event: select

const countries = ['Australia', 'Bermuda', 'Canada']; const handleSelect = (args) => { console.log('Item selected:', args.itemData); }; <ComboBoxComponent dataSource={countries} select={handleSelect}></ComboBoxComponent>

Event: onChange

const countries = ['Australia', 'Bermuda', 'Canada']; const handleSelect = (args) => { console.log('Item selected:', args.itemData); }; <ComboBox dataSource={countries} onChange={handleSelect}></ComboBox>

The select event in EJ2 React is replaced by onChange in React and fires when an item is chosen.

Event: open

const games = ['Cricket', 'Football', 'Basketball']; const handleOpen = (args) => { console.log('Popup opened'); }; <ComboBoxComponent dataSource={games} open={handleOpen}></ComboBoxComponent>

Event: onOpen

const games = ['Cricket', 'Football', 'Basketball']; const handleOpen = (args) => { console.log('Popup opened'); }; <ComboBox dataSource={games} onOpen={handleOpen}></ComboBox>

The open event in EJ2 React is replaced by onOpen in React and fires on popup open.

Event: close

const games = ['Cricket', 'Football', 'Basketball']; const handleClose = (args) => { console.log('Popup closed'); }; <ComboBoxComponent dataSource={games} close={handleClose}></ComboBoxComponent>

Event: onClose

const games = ['Cricket', 'Football', 'Basketball']; const handleClose = (args) => { console.log('Popup closed'); }; <ComboBox dataSource={games} onClose={handleClose}></ComboBox>

The close event in EJ2 React is replaced by onClose in React and fires on popup close.

Event: customValueSpecifier

const games = ['Cricket', 'Football', 'Basketball']; const handleCustomValue = (args) => { console.log('Custom value:', args.value); }; <ComboBoxComponent dataSource={games} allowCustom={true} customValueSpecifier={handleCustomValue}></ComboBoxComponent>

Event: onCustomValueSelect

const games = ['Cricket', 'Football', 'Basketball']; const handleCustomValue = (value) => { console.log('Custom value:', value); }; <ComboBox dataSource={games} customValue={true} onCustomValueSelect={handleCustomValue}></ComboBox>

The customValueSpecifier event in EJ2 React is replaced by onCustomValueSelect in React and fires on committed custom value.

Event: filtering

const games = ['Cricket', 'Football', 'Basketball']; const handleFiltering = (args) => { console.log('Filtering:', args.text); }; <ComboBoxComponent dataSource={games} filtering={handleFiltering}></ComboBoxComponent>

Event: onFilter

const games = ['Cricket', 'Football', 'Basketball']; const handleFiltering = (args) => { console.log('Filtering:', args.text); }; <ComboBox dataSource={games} onFilter={handleFiltering}></ComboBox>

The filtering event in EJ2 React is replaced by onFilter in React and fires during typing-based filtering.