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:

  • HTML
  • <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

  • JS
  • $("#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

  • JS
  • $("#list").ejListBox({
                    allowDrop: true
                });

    allowMultiSelection boolean

    Enables or disables multiple selection.

    Default Value:

    • false

    Example

  • JS
  • $('#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

  • JS
  • $("#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox({ showCheckbox: true, checkedIndices: [2,3] });

    cssClass string

    The root class for the ListBox widget to customize the existing theme.

    Default Value:

    • “”

    Example

  • JS
  • $("#list").ejListBox({ cssClass: 'gradient-lime' });

    dataSource Object

    Contains the list of data for generating the list items.

    Default Value:

    • null

    Example

  • JS
  • $("#customerList").ejListBox({
    
                    dataSource: customerData
    
                });

    enabled boolean

    Enables or disables the ListBox widget.

    Default Value:

    • true

    Example

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox({enablePersistence : false});

    enableRTL boolean

    Displays the ListBox widget’s content from right to left when enabled.

    Default Value:

    • false

    Example

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox({enableWordWrap : false });

    fields Object

    Mapping fields for the data items of the ListBox widget.

    Default Value:

    • null

    Example

  • JS
  • $("#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

  • JS
  • $('#list').ejListBox({ height: "300"});

    itemHeight string

    Defines the height for individual ListBox item.

    Default Value:

    • null

    Example

  • JS
  • 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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $("#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

  • JS
  • $('#countryList').ejListBox({ 
    
                loadDataOnInit: false 
    
            });

    query ej.Query

    The query to retrieve required data from the data source.

    Default Value:

    • ej.Query()

    Example

  • JS
  • 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

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox({selectedIndices : [2,4]});

    showCheckbox boolean

    Enables/Disables the multi selection option with the help of checkbox control.

    Default Value:

    • false

    Example

  • JS
  • $('#list').ejListBox({showCheckbox: true });

    showRoundedCorner boolean

    To display the ListBox container with rounded corners.

    Default Value:

    • false

    Example

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox({ sortOrder: ej.SortOrder.Ascending });

    template string

    The template to display the ListBox widget with customized appearance.

    Default Value:

    • null

    Example

  • JS
  • $('#selectExperts').ejListBox({
    
                    template: '&lt;div class="bike-name"&gt; ${text} &lt;/div&gt;&lt;div class="design"&gt; ${design} &lt;/div&gt;&lt;div class="cont"&gt; ${country} &lt;/div&gt;'
    
                });

    value number

    Holds the selected items values and used to bind value to the list item using AngularJS and KnockoutJS.

    Default Value:

    • “”

    Example

  • HTML
  • <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

  • JS
  • $("#customerList").ejListBox({
                
                        allowVirtualScrolling: true, 
                
                virtualScrollMode: "continuous"           
                
                });

    width string

    Defines the width of the ListBox widget.

    Default Value:

    • null

    Example

  • JS
  • $('#list').ejListBox({ width: "220"});

    targetID string

    Specifies the targetID for the listbox items.

    Default Value: null

    Example

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox("checkItemsByIndices","2,3");

    disable()

    Disables the ListBox widget.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox("disableItemsByIndices" ,"3,5,7");

    enable()

    Enables the ListBox widget when it is disabled.

    Example

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • HTML
  • <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

  • JS
  • $('#list').ejListBox("moveDown");

    moveUp()

    Selects the previous item based on the current selection.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#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

  • JS
  • $("#customerList").ejListBox("refresh", true);

    removeAll()

    Removes all the list items from listbox.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#list').ejListBox("removeAll");

    removeSelectedItems()

    Removes the selected list items from the listbox.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox("unselectItemsByIndices", "2,3,5");

    hideCheckedItems ()

    Hides all the checked items in the listbox.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#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

  • JS
  • $('#list').ejListBox("hideItemByIndex", 2);

    show

    Shows the listbox.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#list').ejListBox("show");

    hide()

    Hides the listbox.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#list').ejListBox("hide");

    hideAllItems()

    Hides all the listbox items in the listbox.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#list').ejListBox("hideAllItems");

    showAllItems()

    Shows all the listbox items in the listbox.

    NOTE

    This method does not accept any arguments.

    Example

  • JS
  • $('#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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 Object 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

  • JS
  • $("#list").ejListBox({
    
        actionBeforeSuccess: function(args) {
    
            //do something
    
        }
    
    });

    change

    Triggers when the item selection is changed.

    Event Arguments Type Description
    model Object 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

  • JS
  • $("#list").ejListBox({
    
        change: function(args) {
    
            //do something
    
        }
    
    });

    checkChange

    Triggers when the list item is checked or unchecked.

    Event Arguments Type Description
    model Object 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

  • JS
  • $("#list").ejListBox({
    
        checkChange: function(args) {
    
            //do something
    
        }
    
    });

    create

    Triggers when the ListBox widget is created successfully.

    Event Arguments Type Description
    model object Instance of the listbox model object.
    type string Name of the event.
    cancel boolean Set this option to true to cancel the event.

    Example

  • JS
  • $("#list").ejListBox({
    
        create: function(args) {
    
            //do something
    
        }
    
    });

    destroy

    Triggers when the ListBox widget is destroyed successfully.

    Event Arguments Type Description
    model Object Instance of the listbox model object.
    type string Name of the event.
    cancel boolean Set this option to true to cancel the event.

    Example

  • JS
  • $("#list").ejListBox({
    
        destroy: function(args) {
    
            //do something
    
        }
    
    });

    focusIn

    Triggers when focus the listbox items.

    Event Arguments Type Description
    model Object Instance of the listbox model object.
    type string Name of the event.
    cancel boolean Set this option to true to cancel the event.

    Example

  • JS
  • $("#list").ejListBox({
    
        focusIn: function(args) {
    
            //do something
    
        }
    
    });

    focusOut

    Triggers when focus out from listbox items.

    Event Arguments Type Description
    model Object Instance of the listbox model object.
    type string Name of the event.
    cancel boolean Set this option to true to cancel the event.

    Example

  • JS
  • $("#list").ejListBox({
    
        focusOut: function(args) {
    
            //do something
    
        }
    
    });

    itemDrag

    Triggers when the list item is being dragged.

    Event Arguments Type Description
    model Object 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
    item Object List item object.
    data Object The Datasource of the listbox.
    index Number List item’s index.
    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 whether the list item is enabled or not.
    text string List item’s text (label).
    value string List item’s value.

    Example

  • JS
  • $("#list").ejListBox({
    
        itemDrag: function(args) {
    
            //do something
    
        }
    
    });

    itemDragStart

    Triggers when the list item is ready to be dragged.

    Event Arguments Type Description
    model Object 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
    item Object List item object.
    data Object The Datasource of the listbox.
    index number List item’s index.
    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 whether the list item is enabled or not.
    text string List item’s text (label).
    value string List item’s value.

    Example

  • JS
  • $("#list").ejListBox({
    
        itemDragStart: function(args) {
    
            //do something
    
        }
    
    });

    itemDragStop

    Triggers when the list item stops dragging.

    Event Arguments Type Description
    model Object 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
    item Object List item object.
    data Object The Datasource of the listbox.
    index number List item’s index.
    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 whether the list item is enabled or not.
    text string List item’s text (label).
    value string List item’s value.

    Example

  • JS
  • $("#list").ejListBox({
    
        itemDragStop: function(args) {
    
            //do something
    
        }
    
    });

    itemDrop

    Triggers when the list item is dropped.

    Event Arguments Type Description
    model Object 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.
    item Object List item object.
    data Object The Datasource of the listbox.
    index number List item’s index.
    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 whether the list item is enabled or not.
    text string List item’s text (label).
    value string List item’s value.

    Example

  • JS
  • $("#list").ejListBox({
    
        itemDrop: function(args) {
    
            //do something
    
        }
    
    });

    select

    Triggers when a list item gets selected.

    Event Arguments Type Description
    model Object 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

  • JS
  • $("#list").ejListBox({
    
        select: function(args) {
    
            //do something
    
        }
    
    });

    unselect

    Triggers when a list item gets unselected.

    Event Arguments Type Description
    model Object 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

  • JS
  • $("#list").ejListBox({
    
        unselect: function(args) {
    
            //do something
    
        }
    
    });