The ListBox allows the user to select values from the predefined list of values.
<ejs-listbox [dataSource]='data'></ejs-listbox>
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.
Defaults to false
string
Sets the CSS classes to root element of this component, which helps to customize the complete styles.
Defaults to ”
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 []
boolean
Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Specifies a value that indicates whether the component is enabled or not.
Defaults to true
FieldSettingsModel
The fields
property maps the columns of the data table and binds the data to the component.
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}
number
| string
Sets the height of the ListBox component.
Defaults to ”
any
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
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ‘en-US’
Query
Accepts the external Query
which will execute along with the data processing.
Defaults to null
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.
Defaults to ”
Specifies the selection mode and its type.
Defaults to { mode: ‘Multiple’, type: ‘Default’ }
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
Specifies the toolbar items and its position.
Defaults to { items: [], position: ‘Right’ }
string[]
| number[]
| boolean[]
Sets the specified item to the selected state or gets the selected item in the ListBox.
Defaults to []
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`[]` | 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
Adds a new item to the 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`[]` | Object | Specifies an array of JSON data or a JSON data. |
|
itemIndex (optional) | number |
Specifies the index to place the newly added item in the list. |
Returns void
This method is used to enable or disable the items in the ListBox based on the items and enable argument.
Parameter | Type | Description |
---|---|---|
items | string[] |
Text items that needs to be enabled/disabled. |
enable (optional) | boolean |
Set true /false to enable/disable the list items. |
Returns void
Sets the focus to ListBox its native method
Returns void
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
Gets all the list items bound on this component.
Returns Element[]
Based on the state parameter, entire list item will be selected/deselected.
Parameter | Type | Description |
---|---|---|
state (optional) | boolean |
Set true /false to select/un select the entire list items. |
Returns void
Based on the state parameter, specified list item will be selected/deselected.
Parameter | Type | Description |
---|---|---|
items | string[] |
Array of text value of the item. |
state (optional) | boolean |
Set true /false to select/un select the list items. |
Returns void
EmitType<Object>
Triggers before fetching data from the remote server.
EmitType<Object>
Triggers after data is fetched successfully from the remote server.
EmitType<Object>
Triggers when the data fetch request from the remote server fails.
EmitType<BeforeItemRenderEventArgs>
Triggers while rendering each list item.
EmitType<ListBoxChangeEventArgs>
Triggers while select / unselect the list item.
EmitType<Object>
Triggers when the component is created.
EmitType<Object>
Triggers when the component is destroyed.
Triggers while dragging the list item.
Triggers after dragging the list item.
Triggers before dropping the list item on another list item.
EmitType<SelectEventArgs>
Triggers while selecting the list item.