ejListBox
11 Jul 201824 minutes to read
The ListBox control provides a list of options for users to select from. It is capable of including other HTML elements such as images, textboxes, check box, and radio buttons and so on. It also supports data binding, template options, multi-select options, etc.
Syntax:
$(element).ejListBox(options)
Example:
<ul id="carsList">
<li>Audi A4</li>
<li>Audi A5</li>
<li>Audi A6</li>
<li>Audi A7</li>
<li>Audi A8</li>
<li>BMW 501</li>
<li>BMW 502</li>
<li>BMW 503</li>
<li>BMW 507</li>
<li>BMW 3200</li>
</ul>
<script>
$('#list').ejListBox();
</script>
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.data.js
-
module:ej.listbox.js
-
module:ej.checkbox.js
-
module:ej.scroller.js
Members
allowDrag boolean
Enables/disables the dragging behavior of the items in ListBox widget.
Default Value:
- false
Example
$("#list").ejListBox({
allowDrag: true
});
allowDrop boolean
Accepts the items which are dropped in to it, when it is set to true.
NOTE
Need to enable allowDrag property to drag the list item from the listbox control.
Default Value:
- false
Example
$("#list").ejListBox({
allowDrop: true
});
allowMultiSelection boolean
Enables or disables multiple selection.
Default Value:
- false
Example
$('#list').ejListBox({allowMultiSelection: true});
allowVirtualScrolling boolean
Loads the list data on demand via scrolling behavior to improve the application’s performance. There are two ways to load data which can be defined using “virtualScrollMode” property.
Default Value:
- false
Example
$("#customerList").ejListBox({
allowVirtualScrolling: true
});
caseSensitiveSearch boolean
Enables or disables the case sensitive search for list item by typing the text (search) value.
NOTE
It works only when the enableIncrementalSearch is set as true.
Default Value:
- false
Example
$('#list').ejListBox({
enableIncrementalSearch: true,
caseSensitiveSearch: true
});
cascadeTo string
Dynamically populate data of a list box while selecting an item in another list box i.e. rendering child list box based on the item selection in parent list box. This property accepts the id of the child ListBox widget to populate the data.
Default Value:
- null
Example
$('#list').ejListBox({
cascadeTo: 'countryList'
});
checkedIndices Array
Set of list items to be checked by default using its index. It works only when the showCheckbox property is set to true.
Default Value:
- null
Example
$('#list').ejListBox({ showCheckbox: true, checkedIndices: [2,3] });
cssClass string
The root class for the ListBox widget to customize the existing theme.
Default Value:
- “”
Example
$("#list").ejListBox({ cssClass: 'gradient-lime' });
dataSource Object
Contains the list of data for generating the list items.
Default Value:
- null
Example
$("#customerList").ejListBox({
dataSource: customerData
});
enabled boolean
Enables or disables the ListBox widget.
Default Value:
- true
Example
$('#list').ejListBox({enabled : false });
enableIncrementalSearch boolean
Enables or disables the search behavior to find the specific list item by typing the text value.
Default Value:
- false
Example
$('#list').ejListBox({enableIncrementalSearch : true});
enablePersistence boolean
Allows the current model values to be saved in local storage or browser cookies for state maintenance when it is set to true.
NOTE
Local storage is supported only in Html5 supported browsers. If the browsers don’t have support for local storage, browser cookies will be used to maintain the state.
Default Value:
- false
Example
$('#list').ejListBox({enablePersistence : false});
enableRTL boolean
Displays the ListBox widget’s content from right to left when enabled.
Default Value:
- false
Example
$('#list').ejListBox({enableRTL : true });
enableWordWrap boolean
Specifies ellipsis (“…”) representation in an overflowed list item content when it is set to false.
Default Value:
- true
Example
$('#list').ejListBox({enableWordWrap : false });
fields Object
Mapping fields for the data items of the ListBox widget.
Default Value:
- null
Example
$("#countryList").ejListBox({
dataSource: countries,
fields: {
text: "name",
value: "key"
}
});
fields.checkBy boolean
Defines the specific field name which contains Boolean values to specify whether the list items to be checked by default or not.
fields.groupBy string
The grouping in the ListBox widget can be defined using this field.
fields.htmlAttributes Object
Defines the HTML attributes such as id, class, styles for the specific ListBox item.
fields.id string
Defines the specific field name which contains id values for the list items.
fields.imageUrl string
Defines the imageURL for the image to be displayed in the ListBox item.
fields.imageAttributes string
Defines the image attributes such as height, width, styles and so on.
fields.selectBy boolean
Defines the specific field name which contains Boolean values to specify whether the list items to be selected by default or not.
fields.spriteCssClass string
Defines the sprite CSS class for the image to be displayed.
fields.tableName string
Defines the table name to get the specific set of list items to be loaded in the ListBox widget while rendering with remote data.
fields.text string
Defines the specific field name in the data source to load the list with data.
fields.value string
Defines the specific field name in the data source to load the list with data value property.
height string
Defines the height of the ListBox widget.
Default Value:
- null
Example
$('#list').ejListBox({ height: "300"});
itemHeight string
Defines the height for individual ListBox item.
Default Value:
- null
Example
BikeList = [
{ employeeId: "bk1", text: "Apache RTR" }, { employeeId: "bk2", text: "CBR 150-R" }, { employeeId: "bk3", text: "CBZ Xtreme" },
{ employeeId: "bk4", text: "Discover" }, { employeeId: "bk5", text: "Dazzler" }, { employeeId: "bk6", text: "Flame" },
{ employeeId: "bk7", text: "Fazer" }, { employeeId: "bk8", text: "FZ-S" }, { employeeId: "bk9", text: "Pulsar" },
{ employeeId: "bk10", text: "Shine" }, { employeeId: "bk11", text: "R15" }, { employeeId: "bk12", text: "Unicorn" }
];
$("#selectBike").ejListBox({
dataSource: BikeList, itemHeight:"40px",
fields: { id: "employeeId", value: "text" }
});
itemsCount number
The number of list items to be shown in the ListBox widget. The remaining list items will be scrollable.
Default Value:
- null
Example
$('#list').ejListBox({itemsCount: 8});
totalItemsCount number
The total number of list items to be rendered in the ListBox widget.
NOTE
It’s dependent on datasource property.
Default Value:
- null
Example
$('#list').ejListBox({totalItemsCount: 8});
itemRequestCount number
The number of list items to be loaded in the list box while enabling virtual scrolling and when virtualScrollMode is set to continuous.
Default Value:
- 5
Example
$("#customerList").ejListBox({
itemRequestCount: 6
});
loadDataOnInit boolean
Loads data for the listbox by default (i.e. on initialization) when it is set to true. It creates empty ListBox if it is set to false.
NOTE
It is used along with cascading feature. See also cascadeTo.
Default Value: true
Example
$('#countryList').ejListBox({
loadDataOnInit: false
});
query ej.Query
The query to retrieve required data from the data source.
Default Value:
- ej.Query()
Example
var query = ej.Query()
.from("Customers").take(10);
$("#customerList").ejListBox({
query: query
});
selectedIndex number
The list item to be selected by default using its index.
Default Value:
- null
Example
$('#list').ejListBox({selectedIndex : 2});
selectedIndices Array
The list items to be selected by default using its indices. To use this property allowMultiSelection should be enabled.
Default Value:
- []
Example
$('#list').ejListBox({selectedIndices : [2,4]});
showCheckbox boolean
Enables/Disables the multi selection option with the help of checkbox control.
Default Value:
- false
Example
$('#list').ejListBox({showCheckbox: true });
showRoundedCorner boolean
To display the ListBox container with rounded corners.
Default Value:
- false
Example
$('#list').ejListBox({ showRoundedCorner: true });
sortOrder enum
Set to sort ListBox items either by Ascending or Descending order. By default sortOrder is set as enum type of “None”.
You can use only below mentioned type for sorting purpose.
Name | Description |
---|---|
None | The items are not sorted. |
Ascending | To sort items in Ascending order. |
Descending | To sort items in Descending order. |
Default Value
- ej.SortOrder.None
Example
$('#list').ejListBox({ sortOrder: ej.SortOrder.Ascending });
template string
The template to display the ListBox widget with customized appearance.
Default Value:
- null
Example
$('#selectExperts').ejListBox({
template: '<div class="bike-name"> ${text} </div><div class="design"> ${design} </div><div class="cont"> ${country} </div>'
});
value number
Holds the selected items values and used to bind value to the list item using AngularJS and KnockoutJS.
Default Value:
- “”
Example
<div ng-app="ListCtrl" ng-controller="ListBoxCtrl">
<ul id="bookSelect" ej-listbox e-datasource="dataList" e-value="value"></ul>
<input type="text" style="margin-top:20px;" id="dropValue" class="input ejinputtext" ng-model="value" />;
</div>
<script type="text/javascript">
var list = [
{ employeeId: "cr1", text: "Dodge Avenger" },
{ employeeId: "cr2", text: "Chrysler 200" },
{ employeeId: "cr3", text: "Ford Focus" },
{ employeeId: "cr4", text: "Ford Taurus", },
{ employeeId: "cr5", text: "Dazzler", },
{ employeeId: "cr6", text: "Chevy Spark", },
{ employeeId: "cr7", text: "Chevy Volt", },
{ employeeId: "cr8", text: "Honda Fit", },
{ employeeId: "cr9", text: "Honda CrossTour", },
{ employeeId: "cr10", text: "Acura RL", },
{ employeeId: "cr11", text: "Hyundai Elantra", },
{ employeeId: "cr12", text: "Mazda3", }
];
angular.module('ListCtrl', ['ejangular'])
.controller('ListBoxCtrl', function ($scope) {
$scope.dataList = list;
$scope.value = "Ford Taurus";
});
$(function () {
var target = $('#bookSelect').data("ejListBox");
target.selectItemByIndex(3);
});
</script>
virtualScrollMode enum
Specifies the virtual scroll mode to load the list data on demand via scrolling behavior. There are two types of mode.
Name |
Description |
---|---|
continuous |
Each time when we scroll to the end of the ListBox widget, the other set of list items will get loaded. |
normal |
This mode allows you to load the list box data while scrolling i.e. each time the scroll bar is scrolled, it will send request to the server to load the data. |
Default Value:
- ej.VirtualScrollMode.Normal
Example
$("#customerList").ejListBox({
allowVirtualScrolling: true,
virtualScrollMode: "continuous"
});
width string
Defines the width of the ListBox widget.
Default Value:
- null
Example
$('#list').ejListBox({ width: "220"});
targetID string
Specifies the targetID for the listbox items.
Default Value: null
Example
$('#list').ejListBox({ targetID: "carsList"});
Methods
addItem(listItem, index)
Adds a given list items in the ListBox widget at a specified index. It accepts two parameters.
Parameters | Type | Description |
listItem | Object |string | This can be a list item object (for JSON binding) or a string (for UL and LI rendering). Also we can the specify this as an array of list item object or an array of strings to add multiple items. |
index | number | The index value to add the given items at the specified index. If index is not specified, the given items will be added at the end of the list. |
Example
$('#list').ejListBox("addItem","Audi R8",1);
checkAll()
Checks all the list items in the ListBox widget. It is dependent on showCheckbox property.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("checkAll");
checkItemByIndex(Index)
Checks a list item by using its index. It is dependent on showCheckbox property.
Parameters | Type | Description |
index | number | Index of the listbox item to be checked. If index is not specified, the given items will be added at the end of the list. |
Example
$('#list').ejListBox("checkItemByIndex",3);
checkItemsByIndices(indices)
Checks multiple list items by using its index values. It is dependent on showCheckbox property.
Parameters | Type | Description |
indices | number[] | Index/Indices of the listbox items to be checked. If index is not specified, the given items will be added at the end of the list. |
NOTE
This method accepts array of integers or a string containing integer values separated by commas as an argument.
Example
$('#list').ejListBox("checkItemsByIndices","2,3");
disable()
Disables the ListBox widget.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("disable");
disableItem(text)
Disables a list item by passing the item text as parameter.
Parameters | Type | Description |
text | string | Text of the listbox item to be disabled. |
Example
$('#list').ejListBox("disableItem","Audi A5");
disableItemByIndex(index)
Disables a list Item using its index value.
Parameters | Type | Description |
index | number | Index of the listbox item to be disabled. |
Example
$('#list').ejListBox("disableItemByIndex" ,3);
disableItemsByIndices(indices)
Disables set of list Items using its index values.
Parameters | Type | Description |
Indices | number[] | string | Indices of the listbox items to be disabled. |
Example
$('#list').ejListBox("disableItemsByIndices" ,"3,5,7");
enable()
Enables the ListBox widget when it is disabled.
Example
$('#list').ejListBox("enable");
enableItem(text)
Enables a list Item using its item text value.
Parameters | Type | Description |
text | string | Text of the listbox item to be enabled. |
Example
$('#list').ejListBox("enableItem", "Audi A5");
enableItemByIndex(index)
Enables a list item using its index value.
Parameters | Type | Description |
index | number | Index of the listbox item to be enabled. |
Example
$('#list').ejListBox("enableItemByIndex", 5);
enableItemsByIndices(indices)
Enables a set of list Items using its index values.
Parameters | Type | Description |
indices | number[] | string | Indices of the listbox items to be enabled. |
Example
$('#list').ejListBox("enableItemsByIndices", "3,5");
getCheckedItems()
Returns the list of checked items in the ListBox widget. It is dependent on showCheckbox property.
NOTE
This method does not accept any arguments.
Returns: object
Example
$('#list').ejListBox("getCheckedItems");
getSelectedItems()
Returns the list of selected items in the ListBox widget.
NOTE
This method does not accept any arguments.
Returns: object
Example
$('#list').ejListBox("getSelectedItems");
getIndexByText(text)
Returns an item’s index based on the given text.
Parameters | Type | Description |
text | string | The list item text (label) |
Returns: number
Example
$('#list').ejListBox("getIndexByText", "Audi A5");
getIndexByValue(value)
Returns an item’s index based on the value given.
Parameters | Type | Description |
indices | string | The list item’s value |
Returns: number
Example
$('#list').ejListBox("getIndexByValue", "audia4");
getTextByIndex()
Returns an item’s text (label) based on the index given.
Parameters | Type | Description |
index | number | The list item index. |
Returns: string
Example
$('#list').ejListBox("getTextByIndex", 3);
getItemByIndex()
Returns a list item’s object using its index.
Parameters | Type | Description |
index | number | The list item index. |
Returns: object
Example
$('#list').ejListBox("getItemByIndex", 3);
getItemByText(text)
Returns a list item’s object based on the text given.
Parameters | Type | Description |
text | string | The list item text. |
Returns: object
Example
$('#list').ejListBox("getItemByText", "Audi A7");
mergeData(data)
Merges the given data with the existing data items in the listbox.
Parameters | Type | Description |
data | Array | Data to merge in listbox. |
Example
<ul id="list"></ul>
<button id="mergeData">Merge Data </button>
<script type="text/javascript">
BikeList = [{ BikeName: "Apache RTR" }, { BikeName: "CBR 150-R" },{ BikeName: "Discover" }, { BikeName: "Dazzler" }];
NewBikeList = [{ BikeName: "Honda" }, { BikeName: "TVS" }];
$('#list').ejListBox({
dataSource: BikeList,
fields: { text: "BikeName" }
});
$("#mergeData").click(function () {
$("#list").ejListBox("mergeData", NewBikeList);
});
</script>
moveDown()
Selects the next item based on the current selection.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("moveDown");
moveUp()
Selects the previous item based on the current selection.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("moveUp");
refresh(refreshData)
Refreshes the ListBox widget.
Parameters | Type | Description |
refreshData | boolean | Refreshes both the datasource and the dimensions of the ListBox widget when the parameter is passed as true, otherwise only the ListBox dimensions will be refreshed. |
Example
$("#customerList").ejListBox("refresh", true);
removeAll()
Removes all the list items from listbox.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("removeAll");
removeSelectedItems()
Removes the selected list items from the listbox.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("removeSelectedItems");
removeItemByText(text)
Removes a list item by using its text.
Parameters | Type | Description |
text | string | Text of the listbox item to be removed. |
Example
$('#list').ejListBox("removeItemByText","Audi A5");
removeItemByIndex(index)
Removes a list item by using its index value.
Parameters | Type | Description |
index | number | Index of the listbox item to be removed. |
Example
$('#list').ejListBox("removeItemByIndex", 2);
selectAll
Selects all the list items dynamically. This method will works when the allowMultiSelection property is set as true.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("selectAll");
selectItemByText(text)
Selects the list item using its text value.
Parameters | Type | Description |
text | string | Text of the listbox item to be selected. |
Example
$('#list').ejListBox("selectItemByText", "Audi A5");
selectItemByValue(value)
Selects list item using its value property.
Parameters | Type | Description |
value | string | Value of the listbox item to be selected. |
Example
$('#list').ejListBox("selectItemByValue", "Audi A5");
selectItemByIndex(index)
Selects list item using its index value.
Parameters | Type | Description |
index | number | Index of the listbox item to be selected. |
Example
$('#list').ejListBox("selectItemByIndex", 2);
selectItemsByIndices(indices)
Selects a set of list items through its index values.
Parameters | Type | Description |
Indices | number|number[] | Index/Indices of the listbox item to be selected. |
Example
$('#list').ejListBox("selectItemsByIndices", "2,3,5");
uncheckAll()
Unchecks all the checked list items in the ListBox widget. To use this method showCheckbox property to be set as true.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("uncheckAll");
uncheckItemByIndex(index)
Unchecks a checked list item using its index value. To use this method showCheckbox property to be set as true.
Parameters | Type | Description |
index | number | Index of the listbox item to be unchecked. |
Example
$('#list').ejListBox("uncheckItemByIndex", 3);
uncheckItemsByIndices(indices)
Unchecks the set of checked list items using its index values. To use this method showCheckbox property must be set to true.
Parameters | Type | Description |
indices | number[] | string | Indices of the listbox item to be unchecked. |
Example
$('#list').ejListBox("uncheckItemsByIndices", "2,3,5");
unselectAll
Unselect all the selected list items in the ListBox widget.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("unselectAll");
unselectItemByIndex(index)
Unselects a selected list item using its index value
Parameters | Type | Description |
index | number | Index of the listbox item to be unselected. |
Example
$('#list').ejListBox("unselectItemByIndex", 2);
unselectItemByText(text)
Unselects a selected list item using its text value.
Parameters | Type | Description |
text | string | Text of the listbox item to be unselected. |
Example
$('#list').ejListBox("unselectItemByText", "Audi A5");
unselectItemByValue(value)
Unselects a selected list item using its value.
Parameters | Type | Description |
value | string | Value of the listbox item to be unselected. |
Example
$('#list').ejListBox("unselectItemByValue", "Audi A5");
unselectItemsByIndices(indices)
Unselects a set of list items using its index values.
Parameters | Type | Description |
indices | number[] | string | Indices of the listbox item to be unselected. |
NOTE
This method accepts array of integers or a string containing list of integer values separated by commas as an argument.
Example
$('#list').ejListBox("unselectItemsByIndices", "2,3,5");
hideCheckedItems ()
Hides all the checked items in the listbox.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("hideCheckedItems");
showItemByIndices(indices)
Shows a set of hidden list Items using its index values.
Parameters | Type | Description |
indices | number[] | string | Indices of the listbox items to be shown. |
Example
$('#list').ejListBox("showItemsByIndices", "1,2,3");
hideItemsByIndices(indices)
Hides a set of list Items using its index values.
Parameters | Type | Description |
indices | number[] | string | Indices of the listbox items to be hidden. |
Example
$('#list').ejListBox("hideItemsByIndices", "1,2,3");
showItemsByValues(values)
Shows the hidden list items using its values.
Parameters | Type | Description |
values | Array | Values of the listbox items to be shown. |
Example
$('#list').ejListBox("showItemsByValues", ["Audi A4", "Audi A5"]);
hideItemsByValues(values)
Hides the list item using its values.
Parameters | Type | Description |
values | Array | Values of the listbox items to be hidden. |
Example
$('#list').ejListBox("hideItemsByValues", ["Audi A4", "Audi A5"]);
showItemByValue(values)
Shows a hidden list item using its value.
Parameters | Type | Description |
value | string | Value of the listbox item to be shown. |
Example
$('#list').ejListBox("showItemByValue", "Audi A5");
hideItemByValue(values)
Hide a list item using its value.
Parameters | Type | Description |
value | string | Value of the listbox item to be hidden. |
Example
$('#list').ejListBox("hideItemByValue", "Audi A5");
showItemByIndex(index)
Shows a hidden list item using its index value.
Parameters | Type | Description |
index | number | Index of the listbox item to be shown. |
Example
$('#list').ejListBox("showItemByIndex", 2);
hideItemByIndex (index)
Hides a list item using its index value.
Parameters | Type | Description |
index | number | Index of the listbox item to be hidden. |
Example
$('#list').ejListBox("hideItemByIndex", 2);
show
Shows the listbox.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("show");
hide()
Hides the listbox.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("hide");
hideAllItems()
Hides all the listbox items in the listbox.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("hideAllItems");
showAllItems()
Shows all the listbox items in the listbox.
NOTE
This method does not accept any arguments.
Example
$('#list').ejListBox("showAllItems");
Events
actionBegin
Triggers before the AJAX request begins to load data in the ListBox widget.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model | object | returns the ListBox model |
type | string | returns the name of the event |
Example
$("#list").ejListBox({
actionBegin: function(args) {
//do something
}
});
actionSuccess
Triggers after the data requested via AJAX is successfully loaded in the ListBox widget.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
count | number | Returns number of times trying to fetch the data |
model | object | returns the ListBox model |
query | object | Returns the query for data retrieval |
request | object | Returns the query for data retrieval from the Database |
type | string | returns the name of the event |
result | array | Returns the number of items fetched from remote data |
xhr | object | Returns the requested data |
NOTE
It internally uses jQuery ajaxSuccess event. For details refer here.
Example
$("#list").ejListBox({
actionSuccess: function(args) {
//do something
}
});
actionComplete
Triggers when the AJAX requests complete. The request may get failed or succeed.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
count | number | Returns number of times trying to fetch the data |
model | object | returns the ListBox model |
query | object | Returns the query for data retrieval |
request | object | Returns the query for data retrieval from the Database |
type | string | returns the name of the event |
result | array | Returns the number of items fetched from remote data |
xhr | object | Returns the requested data |
NOTE
It internally uses jQuery ajaxComplete event. For details refer here.
Example
$("#list").ejListBox({
actionComplete: function(args) {
//do something
}
});
actionFailure
Triggers when the data requested from AJAX get failed.
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
error | object | Returns the error message |
model | object | returns the ListBox model |
query | object | Returns the query for data retrieval |
type | string | returns the name of the event |
NOTE
It internally uses jQuery ajaxError event. For details refer here.
Example
$("#list").ejListBox({
actionFailure: function(args) {
//do something
}
});
actionBeforeSuccess
Event will be triggered before the requested data via AJAX once loaded in successfully.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
actual | Object | List of actual object. |
request | Object | Object of ListBox widget which contains DataManager arguments |
cancel | boolean | Set this option to true to cancel the event. |
result | Array | List of array object |
xhr | Object | ExecuteQuery object of DataManager |
Example
$("#list").ejListBox({
actionBeforeSuccess: function(args) {
//do something
}
});
change
Triggers when the item selection is changed.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
item | Object | List item object. |
data | Object | The Datasource of the listbox. |
index | number | List item’s index. |
cancel | boolean | Set this option to true to cancel the event. |
isChecked | boolean | Boolean value based on whether the list item is checked or not. |
isSelected | boolean | Boolean value based on whether the list item is selected or not. |
isEnabled | boolean | Boolean value based on the list item is enabled or not. |
text | string | List item’s text (label). |
value | string | List item’s value. |
Example
$("#list").ejListBox({
change: function(args) {
//do something
}
});
checkChange
Triggers when the list item is checked or unchecked.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
item | Object | List item object. |
data | Object | The Datasource of the listbox. |
index | number | List item’s index. |
cancel | boolean | Set this option to true to cancel the event. |
isChecked | boolean | Boolean value based on whether the list item is checked or not. |
isSelected | boolean | Boolean value based on whether the list item is selected or not. |
isEnabled | boolean | Boolean value based on the list item is enabled or not. |
text | string | List item’s text (label). |
value | string | List item’s value. |
Example
$("#list").ejListBox({
checkChange: function(args) {
//do something
}
});
create
Triggers when the ListBox widget is created successfully.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
cancel | boolean | Set this option to true to cancel the event. |
Example
$("#list").ejListBox({
create: function(args) {
//do something
}
});
destroy
Triggers when the ListBox widget is destroyed successfully.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
cancel | boolean | Set this option to true to cancel the event. |
Example
$("#list").ejListBox({
destroy: function(args) {
//do something
}
});
focusIn
Triggers when focus the listbox items.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
cancel | boolean | Set this option to true to cancel the event. |
Example
$("#list").ejListBox({
focusIn: function(args) {
//do something
}
});
focusOut
Triggers when focus out from listbox items.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
cancel | boolean | Set this option to true to cancel the event. |
Example
$("#list").ejListBox({
focusOut: function(args) {
//do something
}
});
itemDrag
Triggers when the list item is being dragged.
Event Arguments | Type | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
model |
|
Instance of the listbox model object. | ||||||||||||||||||||||||
type | string | Name of the event. | ||||||||||||||||||||||||
cancel | boolean | Set this option to true to cancel the event. | ||||||||||||||||||||||||
items | Array |
Array of list item object
|
Example
$("#list").ejListBox({
itemDrag: function(args) {
//do something
}
});
itemDragStart
Triggers when the list item is ready to be dragged.
Event Arguments | Type | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
model |
|
Instance of the listbox model object. | ||||||||||||||||||||||||
type | string | Name of the event. | ||||||||||||||||||||||||
cancel | boolean | Set this option to true to cancel the event. | ||||||||||||||||||||||||
items | Array |
Array of list item object
|
Example
$("#list").ejListBox({
itemDragStart: function(args) {
//do something
}
});
itemDragStop
Triggers when the list item stops dragging.
Event Arguments | Type | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
model |
|
Instance of the listbox model object. | ||||||||||||||||||||||||
type | string | Name of the event. | ||||||||||||||||||||||||
cancel | boolean | Set this option to true to cancel the event. | ||||||||||||||||||||||||
items | Array |
Array of list item object
|
Example
$("#list").ejListBox({
itemDragStop: function(args) {
//do something
}
});
itemDrop
Triggers when the list item is dropped.
Event Arguments | Type | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
model |
|
Instance of the listbox model object. | ||||||||||||||||||||||||
type | string | Name of the event. | ||||||||||||||||||||||||
cancel | boolean | Set this option to true to cancel the event. | ||||||||||||||||||||||||
items | Array |
An array of list item objects which are being dropped.
|
Example
$("#list").ejListBox({
itemDrop: function(args) {
//do something
}
});
select
Triggers when a list item gets selected.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
item | Object | List item object. |
data | Object | The Datasource of the listbox. |
index | number | List item’s index. |
cancel | boolean | Set this option to true to cancel the event. |
isChecked | boolean | Boolean value based on whether the list item is checked or not. |
isSelected | boolean | Boolean value based on whether the list item is selected or not. |
isEnabled | boolean | Boolean value based on the list item is enabled or not. |
text | string | List item’s text (label). |
value | string | List item’s value. |
Example
$("#list").ejListBox({
select: function(args) {
//do something
}
});
unselect
Triggers when a list item gets unselected.
Event Arguments | Type | Description |
---|---|---|
model |
|
Instance of the listbox model object. |
type | string | Name of the event. |
item | Object | List item object. |
data | Object | The Datasource of the listbox. |
index | number | List item’s index. |
cancel | boolean | Set this option to true to cancel the event. |
isChecked | boolean | Boolean value based on whether the list item is checked or not. |
isSelected | boolean | Boolean value based on whether the list item is selected or not. |
isEnabled | boolean | Boolean value based on the list item is enabled or not. |
text | string | List item’s text (label). |
value | string | List item’s value. |
Example
$("#list").ejListBox({
unselect: function(args) {
//do something
}
});