Props: allowFiltering const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} allowFiltering={true}></DropDownListComponent> | Props: filterable const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} filterable={true}></DropDownList> | The allowFiltering prop in EJ2 React is replaced in React by directly passing content as filterable to the Dropdown List component. It allows to filter the Dropdown List. |
Props: cssClass const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} cssClass="custom-ddl"></DropDownListComponent> | Props: className const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} className="custom-ddl"></DropDownList> | The cssClass prop in EJ2 React is replaced with the standard React className prop in React. |
Props: dataSource const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets}></DropDownListComponent> | Props: dataSource const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets}></DropDownList> | The content prop in EJ2 React is replaced in React by directly passing content as children to the Message component. |
Props: enableRtl const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} enableRtl={true}></DropDownListComponent> | Props: dir const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<Provider dir='rtl'><DropDownList dataSource={gadgets}></DropDownList></Provider> | The enableRtl property in EJ2 React is now provided through the standard dir="rtl" attribute in react, which you apply globally by wrapping your components in a Provider. |
Props: fields const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
<DropDownListComponent dataSource={sportsData} fields: { text: 'Id', value: 'Game' }></DropDownListComponent> | Props: fields const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
<DropDownList dataSource={sportsData} fields: { text: 'Id', value: 'Game' }></DropDownList> | The fields prop is supported in both EJ2 React and React. These configures the mapping fields for text and value properties in the data source objects. Helps in binding complex data structures to the dropdown. |
Props: allowObjectBinding const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
const [state, setState] = React.useState({
value: { Id: 'game2', Game: 'Football' }
});
const onChange = (args: ChangeEventArgs) => {
setState({
value: event.target.value
});
};
<DropDownListComponent dataSource={sportsData} value={state.value} change={onChange.bind(this)} allowObjectBinding={true}></DropDownListComponent> | Props: allowObjectBinding const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
const [state, setState] = React.useState({
value: { Id: 'game2', Game: 'Football' }
});
const handleChange = (event: DropDownListChangeEvent) => {
setState({
value: event.target.value
});
};
<DropDownList dataSource={sportsData} value={state.value} onChange={handleChange} allowObjectBinding={true}></DropDownList> | The allowObjectBinding prop is supported in both EJ2 React and React. These enables binding of complex objects as values instead of primitive values. When enabled, the entire object can be accessed in events. |
Props: filterBarPlaceholder const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} filterBarPlaceholder="Type to filter"></DropDownListComponent> | Props: filterPlaceholder const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} filterPlaceholder="Type to filter"></DropDownList> | The filterBarPlaceholder prop in EJ2 React is replaced with the filterPlaceholder prop in React, which gives a place holder for filter bar. |
Props: filterType const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} filterType="StartsWith"></DropDownListComponent> | Props: filterType const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} filterType="StartsWith"></DropDownList> | The filterType prop is supported in both EJ2 React and React. Which specifies the type of filtering to be applied with StartsWith, EndsWith, Contains. |
Props: floatLabelType const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} placeholder="Select the item" floatLabelType="Auto"></DropDownListComponent> | Props: labelMode const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} placeholder="Select the item" labelMode="Auto"></DropDownList> | The floatLabelType prop in EJ2 React is replaced with the labelMode prop in React, which specifies the behavior of the floating label when and how the label appears with an options of Auto, Always and Never. |
Props: headerTemplate const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
const Template = () => (
<div>
Suggested contacts
</div>
);
<DropDownListComponent dataSource={gadgets} headerTemplate={Template()}></DropDownListComponent> | Props: headerTemplate const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
const Template = () => (
<div>
Suggested contacts
</div>
);
<DropDownList dataSource={gadgets} headerTemplate={Template()}></DropDownList> | The headerTemplate prop is supported in both EJ2 React and React. These provides a custom template for rendering the header section of the dropdown popup, enabling additional content above the item list. |
Props: footerTemplate const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
const Template = () => (
<div>
<PlusIcon></PlusIcon>
<span>Add Products</span>
</div>
);
<DropDownListComponent dataSource={gadgets} footerTemplate={Template()}></DropDownListComponent> | Props: footerTemplate const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
const Template = () => (
<div>
<PlusIcon></PlusIcon>
<span>Add Products</span>
</div>
);
<DropDownList dataSource={gadgets} footerTemplate={Template()}></DropDownList> | The footerTemplate prop is supported in both EJ2 React and React. These provides a custom template for rendering the footer section of the dropdown popup, enabling additional content below the item list. |
Props: itemTemplate const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
const itemTemplates = (data: any) => {
<div>
<span>{data.Id}</span>
<span>
{data.Games}
</span>
</div>
}
<DropDownListComponent dataSource={sportsData} itemTemplate={itemTemplate}></DropDownListComponent> | Props: itemTemplate const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
const itemTemplates = (data: any) => {
<div>
<span>{data.Id}</span>
<span>
{data.Games}
</span>
</div>
}
<DropDownList dataSource={sportsData} itemTemplate={itemTemplate}></DropDownList> | The itemTemplate prop is supported in both EJ2 React and React. These provides a custom template for rendering each item in the Dropdown List, allowing for customized appearance of list items. |
Props: groupTemplate const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
const groupTemp = (data: any) => {
<div>
<span>{data.items[0].Games}</span>
<span>
({data.items.length} employee{data.items.length > 1 ? 's' : ''})
</span>
</div>
}
<DropDownListComponent dataSource={sportsData} groupTemplate={groupTemp}></DropDownListComponent> | Props: groupTemplate const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
const groupTemp = (data: any) => {
<div>
<span>{data.items[0].Games}</span>
<span>
({data.items.length} employee{data.items.length > 1 ? 's' : ''})
</span>
</div>
}
<DropDownList dataSource={sportsData} groupTemplate={groupTemp}></DropDownList> | The groupTemplate prop is supported in both EJ2 React and React. These provides a custom template for rendering group header sections when items are categorized into groups in the Dropdown List. |
Props: noRecordsTemplate <DropDownListComponent dataSource={[]} noRecordsTemplate={() => <div>No records found</div>}></DropDownListComponent> | Props: noRecordsTemplate <DropDownList dataSource={[]} noRecordsTemplate={() => <div>No records found</div>}></DropDownList> | The noRecordsTemplate prop is supported in both EJ2 React and React. These provides a custom template for the message displayed when no items match the search criteria or when the data source is empty. |
Props: valueTemplate const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
<DropDownListComponent dataSource={sportsData} valueTemplate={(d: Id) => <span>{d.Games} - {d.City}</span>}></DropDownListComponent> | Props: valueTemplate const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
<DropDownList dataSource={sportsData} valueTemplate={(d: any) => <span>{d.Id} - {d.Games}</span>}></DropDownList> | The valueTemplate prop is supported in both EJ2 React and React. These provides a custom template for rendering the selected value in the input element, allowing for customized appearance of the selection. |
Props: ignoreAccent const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
<DropDownListComponent dataSource={sportsData} ignoreAccent={true} allowFiltering={true} filterBarPlaceholder="e.g: aero"></DropDownListComponent> | Props: ignoreAccent const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
<DropDownList dataSource={sportsData} filterable={true} ignoreAccent={true} filterPlaceholder="e.g: aero"></DropDownList> | The ignoreAccent prop is supported in both EJ2 React and React. These ignores the diacritic characters or accents when filtering. |
Props: ignoreCase const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
<DropDownListComponent dataSource={sportsData} ignoreCase={false} allowFiltering={true} filterBarPlaceholder="e.g: aero"></DropDownListComponent> | Props: ignoreCase const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' }];
<DropDownList dataSource={sportsData} filterable={true} ignoreCase={false} filterPlaceholder="e.g: aero"></DropDownList> | The ignoreCase prop is supported in both EJ2 React and React. When set to ‘false’, Consider the case-sensitive on performing the search to find suggestions. |
Props: locale const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} locale='en-US'></DropDownListComponent> | Props: locale const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<Provider locale={'en-US'}>
<DropDownList dataSource={gadgets}></DropDownList>
<Provider> | The locale prop in EJ2 React is now provided through a Provider in React, Which you apply globally by wrapping your components in a Provider and setting locale="en-US". |
Props: placeholder const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} placeholder={'Select the item'}></DropDownListComponent> | Props: placeholder const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} placeholder={'Select the item'}></DropDownList> | The placeholder prop is supported in both EJ2 React and React. It specifies the placeholder text for the input field. |
Props: popupHeight, popupWidth and zIndex const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} popupHeight="200px" popupWidth="100%" zIndex={1000}></DropDownListComponent> | Props: popupSettings const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} popupSettings={ width: '100%', height: '300px', zIndex: 1000 }></DropDownList> | The popupHeight, popupWidth and zIndex prop in EJ2 React is moved to popupSettings. It specifies the height, width and zIndex of the popup list. |
Props: query public dataSource = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',
adaptor: new WebApiAdaptor,
crossDomain: true
});
public fields = { text: 'FirstName', value: 'EmployeeID' };
public query = new Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount();
<DropDownListComponent dataSource={this.dataSource} fields={this.fields} placeholder={'Select a Item'} query={this.query}></DropDownListComponent> | Props: query const remoteData = useMemo(
() =>
new DataManager({
adaptor: new ODataV4Adaptor(),
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
}),
[]
);
const remoteQuery = useMemo(
() => new Query().from('Customers').select(['ContactName', 'CustomerID']).take(8),
[]
);
<DropDownList dataSource={remoteData} fields={{ text: 'ContactName', value: 'CustomerID' }} query={remoteQuery} placeholder={'Select a Item'}></DropDownList> | The query prop is supported in both EJ2 React and React. It specifies the query to retrieve data from the data source. This is useful when working with DataManager for complex data operations. |
Props: readOnly const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} readOnly={true}></DropDownListComponent> | Props: readOnly const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} readOnly={true}></DropDownList> | The readOnly prop is supported in both EJ2 React and React. It specifies whether the input field is read-only. |
Props: showClearButton const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} showClearButton={true}></DropDownListComponent> | Props: clearButton const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} clearButton={true}></DropDownList> | The showClearButton prop in EJ2 React is replaced with the clearButton prop in React. It specifies whether to show a clear button in the Dropdown List component. |
Props: sortOrder const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} sortOrder={SortOrder.Ascending}></DropDownListComponent> | Props: sortOrder const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} sortOrder={SortOrder.Ascending}></DropDownList> | The sortOrder prop is supported in both EJ2 React and React. It specifies the sort order with a options Ascending, Descending and None for the Dropdown List items. |
Props: value const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
const onChange = (args: ChangeEventArgs) => {
setValue(args.itemData === null ? 'null' : args.itemData[fields.value].toString());
setText(args.itemData === null ? 'null' : args.itemData[fields.text].toString());
}
<DropDownListComponent dataSource={gadgets} value='Badminton' change={onChange.bind(this)}></DropDownListComponent> | Props: value const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
const [selectedValue, setSelectedValue] = useState<string | null>(null);
const handleChange = (args?: ChangeEvent) => {
setSelectedValue(args?.value as string);
};
<DropDownList dataSource={gadgets} value={selectedValue} onChange={handleChange}></DropDownList> | The value prop is supported in both EJ2 React and React. It specifies the value to be selected in the Dropdown List component. |
Props: debounceDelay const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} filterable={true} debounceDelay=100></DropDownListComponent> | Props: debounceDelay const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} filterable={true} debounceDelay=100></DropDownList> | The debounceDelay prop is supported in both EJ2 React and React. It specifies the debounce delay (in milliseconds) for filtering input. |
Props: e-small, e-large const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} cssClass='e-small'>Small</DropDownListComponent> | Props: size const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} size={Size.Small}>Small</DropDownList> | CSS class-based sizing in EJ2 React has been replaced with a type-safe size prop in React. Use the Size enum for button sizing, with mappings: "e-small" → Size.Small, "e-large" → Size.Large. |
Props: e-flat, e-outline const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownListComponent dataSource={gadgets} cssClass='e-flat'>Flat</DropDownListComponent> | Props: variant const gadgets = ['Laptop', 'Smartphones', 'Headphones', 'Tablet', 'Smartwatch'];
<DropDownList dataSource={gadgets} variant={Variant.Standard}>Standard Button</DropDownList> | CSS class-based styling (e.g., cssClass='e-flat') in EJ2 React has been replaced with the type-safe variant prop in React. Use the Variant enum with options like Filled, Standard, and Outlined. |