Enables/disables the listbox.

Code example

Initialize a jqxListBox with the disabled property specified.

$('#jqxListBox').jqxListBox({ disabled: true }); 

Gets or sets the listbox width.

Code example

Initialize a jqxListBox with the width property specified.

$("#jqxListBox").jqxListBox({ width: '250px', height: '250px' }); 

Gets or sets the listbox height.

Code example

Initialize a jqxListBox with the height property specified.

$("#jqxListBox").jqxListBox({ width: '250px', height: '250px' }); 

Enables/disables the multiple selection. When this property is set to true, the user can select multiple items.

Code example

Initialize a jqxListBox with the multiple property specified.

$("#jqxListBox").jqxListBox({multiple: true}); 

Gets or sets the selected index.

Code example

Initialize a jqxListBox with the selectedIndex property specified.

$("#jqxListBox").jqxListBox({selectedIndex: 2 }); 

Gets or sets the items source.

Code example

Initialize a jqxListBox with the source property specified.

var data = [

"Affogato",

"Americano",

"Bicerin"

];

$("#jqxListBox").jqxListBox({source: data});

Binding using the jqx.dataAdapter(requires jqxdata.js):

// url of the data.

var url = "../sampledata/customers.txt";

var parentsLength = $("#jqxWidget").parents().length;

if (parentsLength > 3) {

    url = 'demos/sampledata/customers.txt';

}



// prepare the data. Set the datatype to 'json', 'xml', 'tsv', 'array', 'local' or 'csv.

var source =

{

    datatype: "json",

    datafields: [

        { name: 'CompanyName' },

        { name: 'ContactName' }

    ],

    id: 'id',

    url: url

};

// create a new instance of the jqx.dataAdapter.

var dataAdapter = new $.jqx.dataAdapter(source);



// Create a jqxListBox

$("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: theme });

Sets the displayMember of the Items. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'source' property.

Code example

Initialize a jqxListBox with the displayMember property specified.

$("#jqxListBox").jqxListBox({displayMember: 'firstName'});

Sets the valueMember of the Items. The valueMember specifies the name of an object property to set as a 'value' of the list items. The name is contained in the collection specified by the 'source' property.

Code example

Initialize a jqxListBox with the valueMember property specified.

$("#jqxListBox").jqxListBox({valueMember: 'lastName'});

Clears all items.

Code example

Invoke the clear method.

$("#jqxListBox").jqxListBox('clear'); 

Gets or sets the scrollbars size.

Code example

Initialize a jqxListBox with the scrollBarSize property specified.

$("#jqxListBox").jqxListBox({scrollBarSize: 25});

Enables/disables the hover state.

Code example

Initialize a jqxListBox with the enableHover property specified.

$("#jqxListBox").jqxListBox({enableHover: false}); 

Gets or sets the incrementalSearch property. An incremental search begins searching as soon as you type the first character of the search string. As you type in the search string, jqxListBox automatically selects the found item.

Code example

Initialize a jqxListBox with the incrementalSearch property specified.

$("#jqxListBox").jqxListBox({incrementalSearch: false});

Gets or sets the incrementalSearchDelay property. The incrementalSearchDelay specifies the time-interval in milliseconds after which the previous search string is deleted. The timer starts when you stop typing.

Code example

Initialize a jqxListBox with the incrementalSearchDelay property specified.

$("#jqxListBox").jqxListBox({incrementalSearchDelay: 400});

Gets or sets the item incremental search mode. When the user types some text in a focused ListBox, the jqxListBox widget tries to find the searched item using the entered text and the selected search mode. Possible Values: 'none, 'contains', 'containsignorecase', 'equals', 'equalsignorecase', 'startswithignorecase', 'startswith', 'endswithignorecase', 'endswith'

Code example

Initialize a jqxListBox with the searchMode property specified.

$("#jqxListBox").jqxListBox({searchMode: 'contains' }); 

Enables/disables the selection.

Code example

Initialize a jqxListBox with the enableSelection property specified.

$("#jqxListBox").jqxListBox({enableSelection: false}); 

Gets or sets whether the items width should be equal to the listbox's width.

Code example

Initialize a jqxListBox with the equalItemsWidth property specified.

$("#jqxListBox").jqxListBox({equalItemsWidth:false}); 

Gets or sets the height of the jqxListBox Items. When the itemHeight == - 1, each item's height is equal to its desired height.

Code example

Initialize a jqxListBox with the itemHeight property specified.

$("#jqxListBox").jqxListBox({itemHeight: 25});

Gets or sets whether the listbox should display a checkbox next to each item.

Code example

Initialize a jqxListBox with the checkboxes property specified.

$("#jqxListBox").jqxListBox({checkboxes:true}); 

Gets or sets whether the listbox's height is equal to the sum of each item's height

Code example

Initialize a jqxListBox with the autoHeight property specified.

$("#jqxListBox").jqxListBox({autoHeight:true}); 

Gets or sets whether the checkboxes have three states - checked, unchecked and indeterminate.

Code example

Initialize a jqxListBox with the hasThreeStates property specified.

$("#jqxListBox").jqxListBox({hasThreeStates:true}); 

Enables the dragging of ListBox Items.

Code example

Initialize a jqxListBox with the allowDrag property specified.

$("#jqxListBox").jqxListBox({allowDrag:true}); 

Enables the dropping of ListBox Items.

Code example

Initialize a jqxListBox with the allowDrop property specified.

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

Sets the drop action when an item is dropped. Possible values: 'default', 'copy' or 'none'. The 'copy' action adds a clone of the dropped item. The 'none' action means that the dropped item will not be added to a new collection and will not be removed from its parent collection.

Code example

Initialize a jqxListBox with the dropAction property specified.

$("#jqxListBox").jqxListBox({dropAction:'copy'}); 

Callback function which is called when a drag operation starts.

Code example

Set the dragStart property

$("#jqxListBox").jqxListBox({dragStart: function (item) {

        // disable dragging of 'Café au lait' item.

        if (item.label == 'Café au lait')

            return false;

                        

        // enable dragging for the item.

        return true;

    }

});

                        

Callback function which is called when a drag operation ends.

Code example

Set the dragEnd property

$("#jqxListBox").jqxListBox({dragEnd: function (droppedItem) {



    }

});

                        

Callback function which is called when an item is rendered. By using the renderer function, you can customize the look of the list items.

Code example

Set the renderer property

$('#listbox').jqxListBox({renderer: function (index, label, value) {

        var datarecord = data[index];

        return datarecord.firstname + " " + datarecord.lastname;

    }

});

                        

This event is triggered when the user selects an item.

Code example

Bind to the select event by type: jqxListBox.

$('#jqxListBox').bind('select', function () { // Some code here. }); 

This event is triggered when the user unselects an item.

Code example

Bind to the unselect event by type: jqxListBox.

$('#jqxListBox').bind('unselect', function () { // Some code here. }); 

This event is triggered when the user selects an item.

Code example

Bind to the change by type: jqxListBox.

$('#jqxListBox').bind('change', function () { // Some code here. }); 

This event is triggered when the user checks or unchecks an item.

Code example

Bind to the checkchange event by type: jqxListBox.

$('#jqxListBox').bind('checkChange', function (event) { // Some code here. }); 

This event is triggered when the user starts a drag operation.

Code example

Bind to the dragStart event by type: jqxListBox.

$('#jqxListBox').bind('dragStart', function (event) { // Some code here. }); 

This event is triggered when the user drops an item.

Code example

Bind to the dragEnd event by type: jqxListBox.

$('#jqxListBox').bind('dragEnd', function (event) { // Some code here. }); 

Adds a new item to the jqxListBox. Returns 'true', if the new item is added or false if the item is not added.

Code example

Invoke the addItem method.

// @param String

$("#jqxListBox").jqxListBox('addItem', 'jQuery' ); 

Inserts a new item to the jqxListBox. Returns 'true', if the new item is inserted or false if the insertaion fails.

Code example

Invoke the insertAt method.

// @param String

// @param Number

$("#jqxListBox").jqxListBox('insertAt', 'jQuery', 1 ); 

Removes an item from the listbox. Index is a number of the item to remove. Returns true, if the item is removed or false, if the item is not removed.

Code example

Invoke the removeAt method.

// @param Number

$("#jqxListBox").jqxListBox('removeAt', 3 ); 

Disables an item by index. Index is a number.

Code example

Invoke the disableAt method.

// @param Number

$("#jqxListBox").jqxListBox('disableAt', 8 ); 

Enables a disabled item by index. Index is a number.

Code example

Invoke the enableAt method.

// @param Number

$("#jqxListBox").jqxListBox('enableAt', 3 ); 

Gets all ListBox items.

Code example

Invoke the getItems method.

var items = $("#jqxListBox").jqxListBox('getItems'); 

Gets the selected ListBox items.

Code example

Invoke the getSelectedItems method.

var items = $("#jqxListBox").jqxListBox('getSelectedItems'); 

Gets the checked ListBox items.

Code example

Invoke the getCheckedItems method.

var items = $("#jqxListBox").jqxListBox('getCheckedItems'); 

Ensures that an item is visible. index is number. If necessary scrolls to the item.

Code example

Invoke the ensureVisible method.

// @param Number

$("#jqxListBox").jqxListBox('ensureVisible', 2 ); 

Gets item by index.

Code example

Invoke the getItem method.

// @param Number

var item = $("#jqxListBox").jqxListBox('getItem', 1 ); 

Gets the selected item.

Code example

Invoke the getSelectedItem method.

// @param Number

var item = $("#jqxListBox").jqxListBox('getSelectedItem'); 

Gets the index of the selected item.

Code example

Invoke the getSelectedIndex method.

// @param Number

var index = $("#jqxListBox").jqxListBox('getSelectedIndex'); 

Selects item. Index is number .

Code example

Invoke the selectIndex method.

// @param Number

$("#jqxListBox").jqxListBox('selectIndex', 0 ); 

Unselects item by index.

Code example

Invoke the unselectIndex method.

// @param Number

$("#jqxListBox").jqxListBox('unselectIndex', 5 ); 

Clears all selected items.

Code example

Invoke the clearSelection method.

$("#jqxListBox").jqxListBox('clearSelection'); 

Checks a list item when the 'checkboxes' property value is true.

Code example

Invoke the 'checkIndex' method.

$("#jqxListBox").jqxListBox('checkIndex', 0); 

Unchecks a list item when the 'checkboxes' property value is true.

Code example

Invoke the 'uncheckIndex' method.

$("#jqxListBox").jqxListBox('uncheckIndex', 0); 

indeterminates a list item when the 'checkboxes' property value is true.

Code example

Invoke the 'indeterminateIndex' method.

$("#jqxListBox").jqxListBox('indeterminateIndex', 0); 

Checks all list items when the 'checkboxes' property value is true.

Code example

Invoke the 'checkAll' method.

$("#jqxListBox").jqxListBox('checkAll'); 

Unchecks all list items when the 'checkboxes' property value is true.

Code example

Invoke the 'uncheckAll' method.

$("#jqxListBox").jqxListBox('uncheckAll'); 

Stops the ListBox's rendering. That method is usually used when multiple items need to be inserted or removed dynamically.

Code example

Invoke the 'beginUpdate' method.

$("#jqxListBox").jqxListBox('beginUpdate'); 

Starts the ListBox's rendering and refreshes the ListBox. That method is usually used in combination with the 'beginUpdate' method when multiple items need to be inserted or removed dynamically.

Code example

Invoke the 'endUpdate' method.

$("#jqxListBox").jqxListBox('endUpdate');