ListBoxModel API in Vue ListBox API component

Interface for a class ListBox

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.

beforeDrop

EmitType<DropEventArgs>

Triggers before dropping the list item on another list item.

beforeItemRender

EmitType<BeforeItemRenderEventArgs>

Triggers while rendering each list item.

change

EmitType<ListBoxChangeEventArgs>

Triggers while select / unselect the list item.

created

EmitType<Object>

Triggers when the component is created.

destroyed

EmitType<Object>

Triggers when the component is destroyed.

drag

EmitType<DragEventArgs>

Triggers while dragging the list item.

dragStart

EmitType<DragEventArgs>

Triggers after dragging the list item.

drop

EmitType<DragEventArgs>

Triggers before dropping the list item on another list item.

filtering

EmitType<FilteringEventArgs>

Triggers on typing a character in the component.

allowDragAndDrop

boolean

If ‘allowDragAndDrop’ is set to true, then you can perform drag and drop of the list item. ListBox contains same ‘scope’ property enables drag and drop between multiple ListBox.

allowFiltering

boolean

To enable the filtering option in this component. Filter action performs when type in search box and collect the matched item through filtering event. If searching character does not match, noRecordsTemplate property value will be shown.

cssClass

string

Sets the CSS classes to root element of this component, which helps to customize the complete styles.

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.

enablePersistence

boolean

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

1. value

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enabled

boolean

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

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

filterBarPlaceholder

string

Accepts the value to be displayed as a watermark text on the filter bar.

filterType

string

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

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

height

number | string

Sets the height of the ListBox component.

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.

locale

string

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

maximumSelectionLength

number

Sets limitation to the value selection. based on the limitation, list selection will be prevented.

noRecordsTemplate

string

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.

scope

string

Defines the scope value to group sets of draggable and droppable ListBox. A draggable with the same scope value will be accepted by the droppable.

selectionSettings

SelectionSettingsModel

Specifies the selection mode and its type.

sortOrder

string

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.

toolbarSettings

ToolbarSettingsModel

Specifies the toolbar items and its position.

value

string[] | number[] | boolean[]

Sets the specified item to the selected state or gets the selected item in the ListBox.