Search results

DropDownBase

DropDownBase component will generate the list items based on given data and act as base class to drop-down related components

Properties

actionFailureTemplate

string

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

Defaults to ‘The Request Failed’.

dataSource

Object[] | 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.

Defaults to [].

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.

  1. value

Defaults to false.

enableRtl

boolean

When set to true, enables RTL mode of the component that displays the content in the right-to-left direction.

Defaults to false.

enabled

boolean

Specifies a value that indicates whether the component is enabled or not.

Defaults to true.

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");

Defaults to {text: null, value: null, iconCss: null, groupBy: null}

groupTemplate

string

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

Defaults to null.

ignoreAccent

boolean

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

itemTemplate

string

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.

Defaults to null.

locale

string

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

Defaults to undefined

noRecordsTemplate

string

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

Defaults to ‘No Records Found’.

query

Query

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

Defaults to null.

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.

Defaults to None.

zIndex

number

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

Defaults to 1000

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

addItem

Adds a new item to the popup list. By default, new item appends to the list as the last item, but you can insert based on the index parameter.

Parameter Type Description
items Object`[]` &#124;Object | string | boolean | number | string[] | boolean[] | number[] | Specifies an array of JSON data or a JSON data.
itemIndex (optional) number Specifies the index to place the newly added item in the popup list.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.

Returns void

getDataByValue

Gets the data Object that matches the given value.

Parameter Type Description
value string | number | boolean Specifies the value of the list item.

Returns Object | string | number | boolean

getItems

Gets all the list items bound on this component.

Returns Element[]

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

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.