DropDownBaseModel

23 Sep 20253 minutes to read

Interface for a class DropDownBase

Properties

actionBegin EmitType<Object>

Triggers before fetching data from the remote server.

actionComplete EmitType<Object>

Triggers after data is fetched successfully from the remote server.

actionFailure EmitType<Object>

Triggers when the data fetch request from the remote server fails.

created EmitType<Object>

Triggers when the component is created.

dataBound EmitType<Object>

Triggers when data source is populated in the popup list..

destroyed EmitType<Object>

Triggers when the component is destroyed.

select EmitType<SelectEventArgs>

Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.

actionFailureTemplate string|Function

Accepts the template and assigns it to the popup list content of the component
when the data fetch request from the remote server fails.

dataSource { : }[]|DataManager|string[]|number[]|boolean[]

Accepts the list items either through local or remote service and binds it to the component.
It can be an array of JSON Objects or an instance of
DataManager.

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

enableRtl boolean

Enable or disable rendering component in right to left direction.

fields FieldSettingsModel

The fields property maps the columns of the data table and binds the data to the component.

• text - Maps the text column from data table for each list item.
• value - Maps the value column from data table for each list item.
• iconCss - Maps the icon class column from data table for each list item.
• groupBy - Group the list items with it’s related items by mapping groupBy field.

  <input type="text" tabindex="1" id="list"> </input>

  let customers: DropDownList = new DropDownList({
     dataSource:new DataManager({ url:'http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/' }),
     query: new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5),
     fields: { text: 'ContactName', value: 'CustomerID' },
     placeholder: 'Select a customer'
  });
  customers.appendTo("#list");

filterType FilterType

Determines on which filter type, the component needs to be considered on search action.
The FilterType and its supported data types are

FilterType	Description	Supported Types
StartsWith	Checks whether a value begins with the specified value.	String
EndsWith	Checks whether a value ends with specified value.	String
Contains	Checks whether a value contains with specified value.	String

The default value set to StartsWith, all the suggestion items which contain typed characters to listed in the suggestion popup.

groupTemplate string|Function

Accepts the template design and assigns it to the group headers present in the popup list.

ignoreAccent boolean

ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.

ignoreCase boolean

When set to ‘false’, consider the case-sensitive on performing the search to find suggestions.
By default consider the casing.

itemTemplate string|Function

Accepts the template design and assigns it to each list item present in the popup.
We have built-in template engine
which provides options to compile template string into a executable function.
For EX: We have expression evolution as like ES6 expression string literals.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

noRecordsTemplate string|Function

Accepts the template design and assigns it to popup list of component
when no data is available on the component.

query Query

Accepts the external Query
which will execute along with the data processing.

sortOrder SortOrder

Specifies the sortOrder to sort the data source. The available type of sort orders are

• None - The data source is not sorting.
• Ascending - The data source is sorting with ascending order.
• Descending - The data source is sorting with descending order.

zIndex number

specifies the z-index value of the component popup element.