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: {:.example}

{:#members:allowdrop}

Accepts the items which are dropped in to it, when it is set to true.

N> Need to enable allowDrag property to drag the list item from the listbox control.

• false

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:allowmultiselection}

Enables or disables multiple selection.

• false

Example {:.example}

{% highlight js %}

$('#list').ejListBox({allowMultiSelection: true}); 

{% endhighlight %}

{:#members:allowvirtualscrolling}

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.

• false

Example {:.example}

{% highlight js %}

        $("#customerList").ejListBox({

        allowVirtualScrolling: true           

          });

{% endhighlight %}

{:#members:casesensitivesearch}

Enables or disables the case sensitive search for list item by typing the text (search) value.

N> It works only when the enableIncrementalSearch is set as true.

• false

Example {:.example}

{% highlight js %}

$('#list').ejListBox({

    enableIncrementalSearch: true,

    caseSensitiveSearch: true

});

{% endhighlight %}

{:#members:cascadeto}

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.

• null

Example {:.example}

{% highlight js %}

$('#list').ejListBox({

cascadeTo: 'countryList'

});

{% endhighlight %}

{:#members:checkedindices}

Set of list items to be checked by default using its index. It works only when the showCheckbox property is set to true.

• null

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:cssclass}

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

• “”

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:datasource}

Contains the list of data for generating the list items.

• null

Example {:.example}

{% highlight js %}

        $("#customerList").ejListBox({

            dataSource: customerData

        });

{% endhighlight %}

{:#members:enabled}

Enables or disables the ListBox widget.

• true

Example {:.example}

{% highlight js %}

$('#list').ejListBox({enabled : false }); 

{% endhighlight %}

{:#members:enableincrementalsearch}

Enables or disables the search behavior to find the specific list item by typing the text value.

• false

Example {:.example}

{% highlight js %}

$('#list').ejListBox({enableIncrementalSearch : true}); 

{% endhighlight %}

{:#members:enablepersistence}

Allows the current model values to be saved in local storage or browser cookies for state maintenance when it is set to true.

N> 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.

• false

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:enablertl}

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

• false

Example {:.example}

{% highlight js %}

$('#list').ejListBox({enableRTL : true }); 

{% endhighlight %}

{:#members:enablewordwrap}

Specifies ellipsis ("...") representation in an overflowed list item content when it is set to false.

• true

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:fields}

Mapping fields for the data items of the ListBox widget.

• null

Example {:.example}

{% highlight js %}

$("#countryList").ejListBox({

dataSource: countries,

fields: {
    text: "name",
    value: "key"
}

});

{% endhighlight %}

{:#members:fields-checkBy}

Defines the specific field name which contains Boolean values to specify whether the list items to be checked by default or not.

{:#members:fields-groupBy}

The grouping in the ListBox widget can be defined using this field.

{:#members:fields-htmlAttributes}

Defines the HTML attributes such as id, class, styles for the specific ListBox item.

{:#members:fields-id}

Defines the specific field name which contains id values for the list items.

{:#members:fields-imageUrl}

Defines the imageURL for the image to be displayed in the ListBox item.

{:#members:fields-imageAttributes}

Defines the image attributes such as height, width, styles and so on.

{:#members:fields-selectBy}

Defines the specific field name which contains Boolean values to specify whether the list items to be selected by default or not.

{:#members:fields-spriteCssClass}

Defines the sprite CSS class for the image to be displayed.

{:#members:fields-tableName}

Defines the table name to get the specific set of list items to be loaded in the ListBox widget while rendering with remote data.

{:#members:fields-text}

Defines the specific field name in the data source to load the list with data.

{:#members:fields-value}

Defines the specific field name in the data source to load the list with data value property.

{:#members:height}

Defines the height of the ListBox widget.

• null

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:itemheight}

Defines the height for individual ListBox item.

• null

Example {:.example}

{% highlight 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" }
});

{% endhighlight %}

{:#members:itemscount}

The number of list items to be shown in the ListBox widget. The remaining list items will be scrollable.

• null

Example {:.example}

{% highlight js %}

$('#list').ejListBox({itemsCount: 8}); 

{% endhighlight %}

{:#members:totalitemscount}

The total number of list items to be rendered in the ListBox widget.

N> It’s dependent on datasource property.

• null

Example {:.example}

{% highlight js %}

$('#list').ejListBox({totalItemsCount: 8});

{% endhighlight %}

{:#members:itemrequestcount}

The number of list items to be loaded in the list box while enabling virtual scrolling and when virtualScrollMode is set to continuous.

• 5

Example {:.example}

{% highlight js %}

$("#customerList").ejListBox({

itemRequestCount: 6

});

{% endhighlight %}

{:#members:loaddataoninit}

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.

N> It is used along with cascading feature. See also cascadeTo.

Example {:.example}

{% highlight js %}

    $('#countryList').ejListBox({ 

        loadDataOnInit: false 

    });

{% endhighlight %}

{:#members:query}

The query to retrieve required data from the data source.

• ej.Query()

Example {:.example}

{% highlight js %}

var query = ej.Query()

.from("Customers").take(10);

$("#customerList").ejListBox({

query: query

});

{% endhighlight %}

{:#members:selectedindex}

The list item to be selected by default using its index.

• null

Example {:.example}

{% highlight js %}

$('#list').ejListBox({selectedIndex : 2}); 

{% endhighlight %}

{:#members:selectedindices}

The list items to be selected by default using its indices. To use this property allowMultiSelection should be enabled.

• []

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:showcheckbox}

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

• false

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:showroundedcorner}

To display the ListBox container with rounded corners.

• false

Example {:.example}

{% highlight js %}

$('#list').ejListBox({ showRoundedCorner: true }); 

{% endhighlight %}

{:#members:sortOrder}

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.

• ej.SortOrder.None

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:template}

The template to display the ListBox widget with customized appearance.

• null

Example {:.example}

{% highlight js %}

        $('#selectExperts').ejListBox({

            template: '<div class="bike-name"> ${text} </div><div class="design"> ${design} </div><div class="cont"> ${country} </div>'

        });

{% endhighlight %}

{:#members:value}

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

• “”

Example {:.example}

{:#members:virtualscrollmode}

Specifies the virtual scroll mode to load the list data on demand via scrolling behavior. There are two types of mode.

• ej.VirtualScrollMode.Normal

Example {:.example}

{% highlight js %} $("#customerList").ejListBox({

                allowVirtualScrolling: true, 
        
        virtualScrollMode: "continuous"           
        
        });

{% endhighlight %}

{:#members:width}

Defines the width of the ListBox widget.

• null

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#members:targetid}

Specifies the targetID for the listbox items.

Example {:.example}

{% highlight js %}

$('#list').ejListBox({ targetID: "carsList"}); 

{% endhighlight %}

{:#methods:additem}

Adds a given list items in the ListBox widget at a specified index. It accepts two parameters.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("addItem","Audi R8",1); 

{% endhighlight %}

{:#methods:checkall}

Checks all the list items in the ListBox widget. It is dependent on showCheckbox property.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("checkAll"); 

{% endhighlight %}

{:#methods:checkitembyindex}

Checks a list item by using its index. It is dependent on showCheckbox property.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("checkItemByIndex",3); 

{% endhighlight %}

{:#methods:checkitemsbyindices}

Checks multiple list items by using its index values. It is dependent on showCheckbox property.

N> This method accepts array of integers or a string containing integer values separated by commas as an argument.

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#methods:disable}

Disables the ListBox widget.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("disable"); 

{% endhighlight %}

{:#methods:disableitem}

Disables a list item by passing the item text as parameter.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("disableItem","Audi A5"); 

{% endhighlight %}

{:#methods:disableitembyindex}

Disables a list Item using its index value.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("disableItemByIndex" ,3); 

{% endhighlight %}

{:#methods:disableitemsbyindices}

Disables set of list Items using its index values.

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#methods:enable}

Enables the ListBox widget when it is disabled.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("enable");

{% endhighlight %}

{:#methods:enableitem}

Enables a list Item using its item text value.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("enableItem", "Audi A5");

{% endhighlight %}

{:#methods:enableitembyindex}

Enables a list item using its index value.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("enableItemByIndex", 5);

{% endhighlight %}

{:#methods:enableitemsbyindices}

Enables a set of list Items using its index values.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("enableItemsByIndices", "3,5");

{% endhighlight %}

{:#methods:getcheckeditems}

Returns the list of checked items in the ListBox widget. It is dependent on showCheckbox property.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("getCheckedItems");

{% endhighlight %}

{:#methods:getselecteditems}

Returns the list of selected items in the ListBox widget.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("getSelectedItems");

{% endhighlight %}

{:#methods:getindexbytext}

Returns an item’s index based on the given text.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("getIndexByText", "Audi A5");

{% endhighlight %}

{:#methods:getindexbyvalue}

Returns an item’s index based on the value given.

Example {:.example}

{% highlight js %}

    $('#list').ejListBox("getIndexByValue", "audia4");

{% endhighlight %}

{:#methods:gettextbyindex}

Returns an item’s text (label) based on the index given.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("getTextByIndex", 3);

{% endhighlight %}

{:#methods:getitembyindex}

Returns a list item’s object using its index.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("getItemByIndex", 3);

{% endhighlight %}

{:#methods:getitembytext}

Returns a list item’s object based on the text given.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("getItemByText", "Audi A7");

{% endhighlight %}

{:#methods:mergedata}

Merges the given data with the existing data items in the listbox.

Example {:.example}

{:#methods:movedown}

Selects the next item based on the current selection.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#methods:moveup}

Selects the previous item based on the current selection.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("moveUp");

{% endhighlight %}

{:#methods:refresh}

Refreshes the ListBox widget.

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#methods:removeall}

Removes all the list items from listbox.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

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

{% endhighlight %}

{:#methods:removeselecteditems}

Removes the selected list items from the listbox.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("removeSelectedItems");

{% endhighlight %}

{:#methods:removeitembytext}

Removes a list item by using its text.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("removeItemByText","Audi A5");

{% endhighlight %}

{:#methods:removeitembyindex}

Removes a list item by using its index value.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("removeItemByIndex", 2);

{% endhighlight %}

{:#methods:selectall}

Selects all the list items dynamically. This method will works when the allowMultiSelection property is set as true.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("selectAll");

{% endhighlight %}

{:#methods:selectItemByText}

Selects the list item using its text value.

Example {:.example}

{% highlight js %}

        $('#list').ejListBox("selectItemByText", "Audi A5");

{% endhighlight %}

{:#methods:selectitembyvalue}

Selects list item using its value property.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("selectItemByValue", "Audi A5");

{% endhighlight %}

{:#methods:selectitembyindex}

Selects list item using its index value.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("selectItemByIndex", 2);

{% endhighlight %}

{:#methods:selectitemsbyindices}

Selects a set of list items through its index values.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("selectItemsByIndices", "2,3,5");

{% endhighlight %}

{:#methods:uncheckall}

Unchecks all the checked list items in the ListBox widget. To use this method showCheckbox property to be set as true.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("uncheckAll");

{% endhighlight %}

{:#methods:uncheckitembyindex}

Unchecks a checked list item using its index value. To use this method showCheckbox property to be set as true.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("uncheckItemByIndex", 3);

{% endhighlight %}

{:#methods:uncheckitemsbyindices}

Unchecks the set of checked list items using its index values. To use this method showCheckbox property must be set to true.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("uncheckItemsByIndices", "2,3,5");

{% endhighlight %}

{:#methods:unselectall}

Unselect all the selected list items in the ListBox widget.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("unselectAll");

{% endhighlight %}

{:#methods:unselectitembyindex}

Unselects a selected list item using its index value

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("unselectItemByIndex", 2);

{% endhighlight %}

{:#methods:unselectitembytext}

Unselects a selected list item using its text value.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("unselectItemByText", "Audi A5");

{% endhighlight %}

{:#methods:unselectitembyvalue}

Unselects a selected list item using its value.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("unselectItemByValue", "Audi A5");

{% endhighlight %}

{:#methods:unselectitemsbyindices}

Unselects a set of list items using its index values.

N> This method accepts array of integers or a string containing list of integer values separated by commas as an argument.

Example {:.example}

{% highlight js%}

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

{% endhighlight %}

{:#methods:hidecheckeditems}

Hides all the checked items in the listbox.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("hideCheckedItems");

{% endhighlight %}

{:#methods:showitembyindices}

Shows a set of hidden list Items using its index values.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("showItemsByIndices", "1,2,3");

{% endhighlight %}

{:#methods:hideitemsbyindices}

Hides a set of list Items using its index values.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("hideItemsByIndices", "1,2,3");

{% endhighlight %}

{:#methods:showitemsbyvalues}

Shows the hidden list items using its values.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("showItemsByValues", ["Audi A4", "Audi A5"]);

{% endhighlight %}

{:#methods:hideitemsbyvalues}

Hides the list item using its values.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("hideItemsByValues", ["Audi A4", "Audi A5"]);

{% endhighlight %}

{:#methods:showitembyvalue}

Shows a hidden list item using its value.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("showItemByValue", "Audi A5");

{% endhighlight %}

{:#methods:hideitembyvalue}

Hide a list item using its value.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("hideItemByValue", "Audi A5");

{% endhighlight %}

{:#methods:showitembyindex}

Shows a hidden list item using its index value.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("showItemByIndex", 2);

{% endhighlight %}

{:#methods:hideitembyindex}

Hides a list item using its index value.

Example {:.example}

{% highlight js%}

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

{% endhighlight %}

{:#methods:show}

Shows the listbox.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js%}

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

{% endhighlight %}

{:#methods:hide}

Hides the listbox.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js%}

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

{% endhighlight %}

{:#methods:hideallitems}

Hides all the listbox items in the listbox.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js%}

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

{% endhighlight %}

{:#methods:showallitems }

Shows all the listbox items in the listbox.

N> This method does not accept any arguments.

Example {:.example}

{% highlight js%}

        $('#list').ejListBox("showAllItems");

{% endhighlight %}

{:#events:actionbegin}

Triggers before the AJAX request begins to load data in the ListBox widget.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

actionBegin: function(args) { 
    
   //do something 
}

});

{% endhighlight %}

{:#events:actionsuccess}

Triggers after the data requested via AJAX is successfully loaded in the ListBox widget.

N> It internally uses jQuery ajaxSuccess event. For details refer here.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

actionSuccess: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:actioncomplete}

Triggers when the AJAX requests complete. The request may get failed or succeed.

N> It internally uses jQuery ajaxComplete event. For details refer here.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

actionComplete: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:actionfailure}

Triggers when the data requested from AJAX get failed.

N> It internally uses jQuery ajaxError event. For details refer here.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

actionFailure: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:actionbeforesuccess}

Event will be triggered before the requested data via AJAX once loaded in successfully.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

actionBeforeSuccess: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:change}

Triggers when the item selection is changed.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

change: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:checkchange}

Triggers when the list item is checked or unchecked.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

checkChange: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:create}

Triggers when the ListBox widget is created successfully.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

create: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:destroy}

Triggers when the ListBox widget is destroyed successfully.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

destroy: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:focusin}

Triggers when focus the listbox items.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

focusIn: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:focusout}

Triggers when focus out from listbox items.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

focusOut: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:itemdrag}

Triggers when the list item is being dragged.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

itemDrag: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:itemdragstart}

Triggers when the list item is ready to be dragged.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

itemDragStart: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:itemdragstop}

Triggers when the list item stops dragging.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

itemDragStop: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:itemdrop}

Triggers when the list item is dropped.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

itemDrop: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:select}

Triggers when a list item gets selected.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

select: function(args) {

    //do something

}

});

{% endhighlight %}

{:#events:unselect}

Triggers when a list item gets unselected.

Example {:.example}

{% highlight js%}

$("#list").ejListBox({

unselect: function(args) {

    //do something

}

});

{% endhighlight %}