jQuery ListBox API

Name Type Default

autoHeight Boolean false

Sets or gets whether the listbox's height is equal to the sum of each item's height

Code example

Set the autoHeight property.

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

Get the autoHeight property.

var autoHeight = $('#jqxListBox').jqxListBox('autoHeight');

Try it: autoHeight is set to true

allowDrag(requires jqxdragdrop.js) Boolean false

Enables/disables the dragging of ListBox Items.

Code example

Set the allowDrag property.

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

Get the allowDrag property.

var allowDrag = $('#jqxListBox').jqxListBox('allowDrag');

Try it: allowDrag is set to true

allowDrop(requires jqxdragdrop.js) Boolean false

Enables/disables the dropping of ListBox Items.

Code example

Set the allowDrop property.

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

Get the allowDrop property.

var allowDrop = $('#jqxListBox').jqxListBox('allowDrop');

Try it: allowDrop is set to true

checkboxes Boolean false

Sets or gets whether the listbox should display a checkbox next to each item.

Code example

Set the checkboxes property.

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

Get the checkboxes property.

var checkboxes = $('#jqxListBox').jqxListBox('checkboxes');

Try it: checkboxes is set to true

disabled Boolean false

Enables/disables the listbox.

Code example

Set the disabled property.

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

Get the disabled property.

var disabled = $('#jqxListBox').jqxListBox('disabled');

Try it: disabled is set to true

displayMember String ""

Sets or gets 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

Set the displayMember property.

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

Get the displayMember property.

var displayMember = $('#jqxListBox').jqxListBox('displayMember');

Try it: displayMember is set to text

dropAction(requires jqxdragdrop.js) String 'default'.

Sets or gets the drop action when an item is dropped.

Possible Values:

'default'

'copy'-adds a clone of the dropped item

'none'-means that the dropped item will not be added to a new collection and will not be removed from its parent collection

Code example

Set the dropAction property.

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

Get the dropAction property.

var dropAction = $('#jqxListBox').jqxListBox('dropAction');

Try it: dropAction is set to 'copy'

dragStart Function null

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;
}
});

Get the dragStart property.

var dragStart = $('#jqxListBox').jqxListBox('dragStart');

Try it: dragStart is set to custom function

dragEnd Function null

Callback function which is called when a drag operation ends.

Code example

Set the dragEnd property

$("#jqxListBox").jqxListBox({ dragEnd: function (dragItem, dropItem) 
{
    // dragItem is the dragged Item.
    // dropItem is the item under the mouse cursor when you dropped the dragged item.
    if (dragItem.label == "Frappuccino")
    return false;
}
});

Get the dragEnd property.

var dragEnd = $('#jqxListBox').jqxListBox('dragEnd');

Try it: dragEnd is set to custom function

enableHover Boolean true

Enables/disables the hover state.

Code example

Set the enableHover property.

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

Get the enableHover property.

var enableHover = $('#jqxListBox').jqxListBox('enableHover');

Try it: enableHover is set to false

enableSelection Boolean true

Enables/disables the selection.

Code example

Set the enableSelection property.

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

Get the enableSelection property.

var enableSelection = $('#jqxListBox').jqxListBox('enableSelection');

Try it: enableSelection is set to false

equalItemsWidth Boolean true

Sets or gets whether the items width should be equal to the listbox's width.

Code example

Set the equalItemsWidth property.

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

Get the equalItemsWidth property.

var equalItemsWidth = $('#jqxListBox').jqxListBox('equalItemsWidth');

Try it: equalItemsWidth is set to false

filterable Boolean false

Determines whether the Filtering is enabled.

Code example

Set the filterable property.

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

Get the filterable property.

var filterable = $('#jqxListBox').jqxListBox('filterable');

Try it: filterable is set to true

filterHeight Number 27

Determines the Filter's height.

Code example

Set the filterHeight property.

$("#jqxListBox").jqxListBox({filterHeight:30});

Get the filterHeight property.

var filterHeight = $('#jqxListBox').jqxListBox('filterHeight');

Try it: filterHeight is set to 30

filterDelay Number 100

Determines the Filter's delay. After 100 milliseconds, the widget automatically filters its data based on the filter input's value. To perform filter only on "Enter" key press, set this property to 0.

Code example

Set the filterDelay property.

$("#jqxListBox").jqxListBox({filterDelay:300});

Get the filterDelay property.

var filterDelay = $('#jqxListBox').jqxListBox('filterDelay');

Try it: filterDelay is set to 300

filterPlaceHolder String "Looking for"

Determines the Filter input's place holder.

Code example

Set the filterPlaceHolder property.

$("#jqxListBox").jqxListBox({filterPlaceHolder:300});

Get the filterPlaceHolder property.

var filterPlaceHolder = $('#jqxListBox').jqxListBox('filterPlaceHolder');

Try it: filterPlaceHolder is set to "Filtering..."

height String null

Sets or gets the listbox's height.

Code example

Set the height property.

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

Get the height property.

var height = $('#jqxListBox').jqxListBox('height');

Try it: height is set to '200px'

hasThreeStates Boolean false

Sets or gets whether the checkboxes have three states - checked, unchecked and indeterminate.

Code example

Set the hasThreeStates property.

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

Get the hasThreeStates property.

var hasThreeStates = $('#jqxListBox').jqxListBox('hasThreeStates');

Try it: hasThreeStates is set to true

itemHeight Number -1

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

Code example

Set the itemHeight property specified.

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

Get the itemHeight property.

var itemHeight = $('#jqxListBox').jqxListBox('itemHeight');

Try it: itemHeight is set to 30

incrementalSearch Boolean true

Sets or gets 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

Set the incrementalSearch property.

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

Get the incrementalSearch property.

var incrementalSearch = $('#jqxListBox').jqxListBox('incrementalSearch');

Try it: incrementalSearch is set to false

incrementalSearchDelay Number 700

Sets ot gets 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

Set the incrementalSearchDelay property.

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

Get the incrementalSearchDelay property.

var incrementalSearchDelay = $('#jqxListBox').jqxListBox('incrementalSearchDelay');

Try it: incrementalSearchDelay is set to 150

multiple Boolean false

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

Code example

Set the multiple property.

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

Get the multiple property.

var multiple = $('#jqxListBox').jqxListBox('multiple');

Try it: multiple is set to true

multipleextended Boolean false

Enables/disables the multiple selection using Shift and Ctrl keys. When this property is set to true, the user can select multiple items by clicking on item and holding Shift or Ctrl.

Code example

Set the multipleextended property.

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

Get the multipleextended property.

var multipleextended = $('#jqxListBox').jqxListBox('multipleextended');

Try it: multipleextended is set to true

renderer Function null

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

$('#jqxListBox').jqxListBox({renderer: function (index, label, value) 
{
    var datarecord = data[index];
    return datarecord.firstname + " " + datarecord.lastname;
}
});

Get the renderer property.

var renderer = $('#jqxListBox').jqxListBox('renderer');

Try it: renderer is set to custom rendering function

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

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

Get the rtl property.

var rtl = $('#jqxListBox').jqxListBox('rtl');

Try it: rtl is set to true

selectedIndex Number -1

Sets or gets the selected index.

Code example

Set the selectedIndex propert.

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

Get the selectedIndex property.

var selectedIndex = $('#jqxListBox').jqxListBox('selectedIndex');

Try it: selectedIndex is set to 2

source Array null

Sets or gets the item's source.

Code example

Set the source property.

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
$("#jqxListBox").jqxListBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250});

Get the source property.

var source = $('#jqxListBox').jqxListBox('source');

Try it: source is set to source

scrollBarSize Number 17

Sets or gets the scrollbars's size.

Code example

Set the scrollBarSize property.

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

Get the scrollBarSize property.

var scrollBarSize = $('#jqxListBox').jqxListBox('scrollBarSize');

Try it: scrollBarSize is set to 15

searchMode String startswith

Sets or gets 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

Set the searchMode property.

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

Get the searchMode property.

var searchMode = $('#jqxListBox').jqxListBox('searchMode');

Try it: searchMode is set to 'startswithignorecase'

theme String ''

valueMember String ""

Sets or gets 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

Set the valueMember property.

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

Get the valueMember property.

var valueMember = $('#jqxListBox').jqxListBox('valueMember');

Try it: valueMember is set to value

width String null

Sets or gets the listbox's width.

Code example

Set the width property.

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

Get the width property.

var width = $('#jqxListBox').jqxListBox('width');

Try it: width is set to '200px'

bindingComplete Event

This event is triggered when the data binding operation is completed.

Code example

Bind to the bindingComplete event by type: jqxListBox.


$("#jqxListBox").on('bindingComplete', function (event) {
});

Try it: Bind to the bindingComplete event by type:jqxListBox

change Event

This event is triggered when the user selects an item.

Code example

Bind to the change by type: jqxListBox.


$('#jqxListBox').on('change', function (event) {
    // the event is raised when the selection is changed.
    var args = event.args;
    if (args) {
        var index = args.index;
        var item = args.item;
        var originalEvent = args.originalEvent;
        // get item's label and value.
        var label = item.label;
        var value = item.value;
        var type = args.type; // keyboard, mouse or null depending on how the item was selected.
    }
});

The item object has the following fields:

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Try it: Bind to the change event by type:jqxListBox

checkChange Event

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

Code example

Bind to the checkChange event by type: jqxListBox.


$("#jqxListBox").on('checkChange', function (event) {
    var args = event.args;
    // get new check state.
    var checked = args.checked;
    // get the item and it's label and value fields.
    var item = args.item;
    var itemLabel = item.label;
    var itemValue = item.value;
    // get all checked items.
    var checkedItems = $("#jqxListBox").jqxListBox('getCheckedItems');
});

The item object has the following fields:

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Try it: Bind to the checkChange event by type:jqxListBox

dragStart Event

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

Code example

Bind to the dragStart event by type: jqxListBox.


$("#jqxListBox").on('dragStart', function (event) {
    var args = event.args;
    var label = args.label;
    var value = args.value;
    var originalEvent = args.originalEvent;
});

Try it: Bind to the dragStart event by type:jqxListBox

dragEnd Event

This event is triggered when the user drops an item.

Code example

Bind to the dragdragEndnd event by type: jqxListBox.


$("#jqxListBox").on('dragEnd', function (event) {
    var args = event.args;
    var label = args.label;
    var value = args.value;
    var originalEvent = args.originalEvent;
});

Try it: Bind to the dragEnd event by type:jqxListBox

select Event

This event is triggered when the user selects an item.

Code example

Bind to the select event by type: jqxListBox.


$('#jqxListBox').on('select', function (event) {
    var args = event.args;
    if (args) {
        var index = args.index;
        var item = args.item;
        var originalEvent = args.originalEvent;
        // get item's label and value.
        var label = item.label;
        var value = item.value;
        var type = args.type; // keyboard, mouse or null depending on how the item was selected.
    }
});

The item object has the following fields:

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Try it: Bind to the select event by type:jqxListBox

unselect Event

This event is triggered when the user unselects an item.

Code example

Bind to the unselect event by type: jqxListBox.


$('#jqxListBox').on('unselect', function (event) 
{
    var args = event.args;
    if (args) {
        var index = args.index;
        var item = args.item;
        var originalEvent = args.originalEvent;
        // get item's label and value.
        var label = item.label;
        var value = item.value;
    }
});

The item object has the following fields:

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Try it: Bind to the unselect event by type:jqxListBox

addItem Method

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

The following fields can be used for the new item:

label - determines the item's label.
value - determines the item's value.
disabled - determines whether the item is enabled/disabled.
checked - determines whether item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - determines the item's display html. This can be used instead of label.
group - determines the item's group.

Parameter	Type	Description
Item	Object/String

Return Value
None

Code example

Invoke the addItem method.

// @param String

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

Code example 2

Invoke the addItem method.

// @param Object

$("#jqxListBox").jqxListBox('addItem', { label: 'Text' value: 'Id'} );

Try it: adds an item in the jqxListBox

beginUpdate Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the beginUpdate method.

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

Try it: beginUpdate is invoked.

clear Method

Clears all items.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the clear method.

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

Try it: clears all items in the jqxListBox

clearSelection Method

Clears all selected items.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the clearSelection method.

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

Try it: clears the selection in the jqxListBox

checkIndex Method

Checks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to check the first item, the 'checkIndex' method should be called with parameter 0.

Parameter	Type	Description
Index	Number

Return Value
None

Code example

Invoke the checkIndex method.

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

Try it: checks a box in the jqxListBox

checkItem Method

Checks an item.

Parameter	Type	Description
Item	Object/String

Return Value
None

Code example

Invoke the checkItem method.

// @param jqxListBox Item

$("#jqxListBox").jqxListBox('checkItem', item );

*To get an item, use the getItem or getItemByValue methods.

Try it: checks item in the jqxListBox

checkAll Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the checkAll method.

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

Try it: checks all items in the jqxListBox

clearFilter Method

Clears the widget's filter when filtering is applied.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the clearFilter method.

$('#jqxListBox').jqxListBox('clearFilter');

Try it: clears the jqxListBox's Filter.

destroy Method

Destroy the jqxListBox widget. The destroy method removes the jqxListBox widget from the web page.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the destroy method.

$('#jqxListBox').jqxListBox('destroy');

Try it: destroys the jqxListBox

disableItem Method

Disables an item. Item is an Object.

The following fields can be used for the item:

label - determines the item's label.
value - determines the item's value.
disabled - determines whether the item is enabled/disabled.
checked - determines whether item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - determines the item's display html. This can be used instead of label.
group - determines the item's group.

Parameter	Type	Description
Item	Object/String

Return Value
None

Code example

Invoke the disableItem method.

// @param Number

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

Try it: disables an item in the jqxListBox

disableAt Method

Disables an item by index. Index is a number.

Parameter	Type	Description
Index	Number

Return Value
None

Code example

Invoke the disableAt method.

// @param Number

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

Try it: disables an item in the jqxListBox

enableItem Method

Enables an item. Item is an Object.

The following fields can be used for the item:

label - determines the item's label.
value - determines the item's value.
disabled - determines whether the item is enabled/disabled.
checked - determines whether item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - determines the item's display html. This can be used instead of label.
group - determines the item's group.

Parameter	Type	Description
Item	Object/String

Return Value
None

Code example

Invoke the enableItem method.

// @param Number

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

Try it: enables an item in the jqxListBox

enableAt Method

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

Parameter	Type	Description
Index	Number

Return Value
None

Code example

Invoke the enableAt method.

// @param Number

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

Try it: enables an item in the jqxListBox

ensureVisible Method

Ensures that an item is visible. Index is number. If necessary scrolls to the item. Insted of Index, you can also pass the item's value.

Parameter	Type	Description
item	Number/String/Object

Return Value
None

Code example

Invoke the ensureVisible method.

// @param Number

// @optional param Boolean - determines whether to make the item to be the top visible item in the list

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

$("#jqxListBox").jqxListBox('ensureVisible', "Iced Coffee" );

Try it: ensures the visibility of an items in the jqxListBox

endUpdate Method

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.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the endUpdate method.

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

Try it: endUpdate is invoked.

focus Method

Sets the focus to the jqxListBox.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the focus method.

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

Try it: focuses the jqxListBox

getItems Method

Gets all items. The returned value is an array of Items.

Each item represents an Object with the following fields.
Item Fields

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Parameter	Type	Description
None

Return Value
Array

Code example

Invoke the getItems method.

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

Get the first item.

var items = $("#jqxListBox").jqxListBox('getItems'); var firstItem = items[0];

Try it: returns an Array of all items and displays them

getSelectedItems Method

Gets the selected ListBox items. The returned value is an Array of items.

Each item represents an Object with the following fields.
Item Fields

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Parameter	Type	Description
None

Return Value
Arrays

Code example

Invoke the getSelectedItems method.

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

Try it: gets the selected items in the jqxListBox

getCheckedItems Method

Gets the checked ListBox items. Returns an Array of checked items.

Each item represents an Object with the following fields.
Item Fields

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Parameter	Type	Description
None

Return Value
Array

Code example

Invoke the getCheckedItems method.

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

Try it: returns an Array of all checked items and displays them

getItem Method

Gets an item by index. The returned value is an Object with the following fields:

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Parameter	Type	Description
Index	Number

Return Value
Object

Code example

Invoke the getItem method.

// @param Number

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

Try it: gets the an item by its index in the jqxListBox

getItemByValue Method

Gets an item by its value. The returned value is an Object with the following fields:

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Parameter	Type	Description
Item	Object/String

Return Value
Object

Code example

Invoke the getItemByValue method.

// @param Value

var item = $("#jqxWidget").jqxListBox('getItemByValue', "Bon app'");

Try it: gets the item by its value in the jqxListBox

getSelectedItem Method

Gets the selected item. The returned value is an Object or null(if there is no selected item).

Item Fields

label - gets item's label.
value - gets the item's value.
disabled - gets whether the item is enabled/disabled.
checked - gets whether the item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - gets the item's display html. This can be used instead of label.
index - gets the item's index.
group - gets the item's group.

Parameter	Type	Description
None

Return Value
Object

Code example

Invoke the getSelectedItem method.

// @param Number

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

Try it: gets the selected item by its value in the jqxListBox

getSelectedIndex Method

Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.

Parameter	Type	Description
None

Return Value
Number

Code example

Invoke the getSelectedIndex method.

// @param Number

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

Try it: returns the selected item's index and displays it

insertAt Method

Inserts a new item to the jqxListBox. Returns 'true', if the new item is inserted or false if the insertaion fails. The first parameter is Object or String - the new item. The second parameter is Number - the item's index.

The following fields can be used for the new item:

label - determines the item's label.
value - determines the item's value.
disabled - determines whether the item is enabled/disabled.
checked - determines whether item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - determines the item's display html. This can be used instead of label.
group - determines the item's group.

Parameter	Type	Description
Item	Object/String
Index	Number

Return Value
None

Code example

Invoke the insertAt method.

// @param String

// @param Number

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

Code example 2

Invoke the insertAt method.

// @param Object

// @param Number

$("#jqxListBox").jqxListBox('insertAt', '{ label: 'Text' value: 'Id'}, 1 );

Try it: inserts an item in the jqxListBox

invalidate Method

The invalidate method will repaint the jqxListBox's items.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the invalidate method.

$('#jqxListBox').jqxListBox('invalidate');

Try it: invalidates the jqxListBox

indeterminateItem Method

Indeterminates an item.

Parameter	Type	Description
Item	Object/String

Return Value
None

Code example

Invoke the indeterminateItem method.

// @param jqxListBox Item

$("#jqxListBox").jqxListBox('indeterminateItem', item );

*To get an item, use the getItem or getItemByValue methods.

Try it: indeterminate item in the jqxListBox

indeterminateIndex Method

indeterminates a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to indeterminate the first item, the 'indeterminateIndex' method should be called with parameter 0.

Parameter	Type	Description
Index	Number

Return Value
None

Code example

Invoke the indeterminateIndex method.

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

Try it: indeterminate a box in the jqxListBox

removeItem Method

Removes an item from the listbox. Parameter type: Object returned by the "getItem" method or String - the value of an item. Returns 'true', if the item is removed or 'false', if the item is not removed.

Parameter	Type	Description
Item	Object/String

Return Value
None

Code example

Invoke the removeItem method.

// @param Object

$("#jqxListBox").jqxListBox('removeItem', "List Item" );

Try it: removes an item in the jqxListBox

removeAt Method

Removes an item from the listbox. Parameter type: Number - the index of the item. The method returns 'true', if the item is removed or 'false', if the item is not removed.

Parameter	Type	Description
Index	Number

Return Value
None

Code example

Invoke the removeAt method.

// @param Number

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

Try it: removes an item in the jqxListBox

render Method

Renders the jqxListBox widget.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the render method.

$('#jqxListBox').jqxListBox('render');

Try it: renders the jqxListBox

refresh Method

Refreshes the jqxListBox widget. The refresh method will update the jqxListBox's layout, size and data.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the refresh method.

$('#jqxListBox').jqxListBox('refresh');

Try it: refreshes the jqxListBox

selectItem Method

Selects an item.

Parameter	Type	Description
Item	Object/String

Return Value
None

Code example

Invoke the selectItem method.

// @param jqxListBox Item

$("#jqxListBox").jqxListBox('selectItem', item );

*To get an item, use the getItem or getItemByValue methods.

Try it: select item in the jqxListBox

selectIndex Method

Selects item. Index is number. The index is zero-based, i.e to select the first item, the 'selectIndex' method should be called with parameter 0.

Parameter	Type	Description
Index	Number

Return Value
None

Code example

Invoke the selectIndex method.

// @param Number

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

Try it: select an item by its index in the jqxListBox

updateItem Method

Updates an item. The first parameter is the new item. The second parameter could be an existing item or the value of an existing item.

The following fields can be used for the item:

label - determines the item's label.
value - determines the item's value.
disabled - determines whether the item is enabled/disabled.
checked - determines whether item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - determines the item's display html. This can be used instead of label.
group - determines the item's group.

Parameter	Type	Description
Item	Object/String
Value	String

Return Value
None

Code example

Invoke the updateItem method.

// @param Object

// @param Object

$("#jqxListBox").jqxListBox('updateItem', { label: "Text", value: "Id1" }, "Antonio Moreno Taquera");

Try it: updates an item in the jqxListBox

updateAt Method

Updates an item. The first parameter is the new item. The second parameter is the index of the item to be updated.

The following fields can be used for the item:

label - determines the item's label.
value - determines the item's value.
disabled - determines whether the item is enabled/disabled.
checked - determines whether item is checked/unchecked.
hasThreeStates - determines whether the item's checkbox supports three states.
html - determines the item's display html. This can be used instead of label.
group - determines the item's group.

Parameter	Type	Description
item	Object/String
index	Number

Return Value
None

Code example

Invoke the updateAt method.

// @param Number

$("#jqxListBox").jqxListBox('updateAt', { label: "Text", value: "Id1" }, 3 );

Try it: updates an item in the jqxListBox

unselectIndex Method

Unselects item by index. The index is zero-based, i.e to select the first item, the 'unselectIndex' method should be called with parameter 0.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the unselectIndex method.

// @param Number

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

Try it: unselect an item by its index in the jqxListBox

unselectItem Method

Unselects an item.

Parameter	Type	Description
item	Object/String

Return Value
None

Code example

Invoke the unselectItem method.

// @param jqxListBox Item

$("#jqxListBox").jqxListBox('unselectItem', item );

*To get an item, use the getItem or getItemByValue methods.

Try it: unselect item in the jqxListBox

uncheckIndex Method

Unchecks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to uncheck the first item, the 'uncheckIndex' method should be called with parameter 0.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the uncheckIndex method.

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

Try it: unchecks a box in the jqxListBox

uncheckItem Method

Unchecks an item.

Parameter	Type	Description
item	Object/String

Return Value
None

Code example

Invoke the uncheckItem method.

// @param jqxListBox Item

$("#jqxListBox").jqxListBox('uncheckItem', item );

*To get an item, use the getItem or getItemByValue methods.

Try it: unchecks item in the jqxListBox

uncheckAll Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the uncheckAll method.

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

Try it: unchecks all items in the jqxListBox

val Method

Sets or gets the selected value.

Parameter	Type	Description
value	String

Return Value
String

Code example

Invoke the val method.

// Get the value.

var value = $("#jqxListBox").jqxListBox('val');

// Get the value using jQuery's val()

var value = $("#jqxListBox").val();

// Set value.

$("#jqxListBox").jqxListBox('val', 'New Value');

// Set value using jQuery's val().

$("#jqxListBox").val('New Value');

Try it: sets or gets the selected value in the jqxListBox

¿´¿´Å·ÃÀÒ»¼¶ÊÓÆµ¿á¹·

Properties

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Events

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Methods

Code example

Code example 2

Code example

Code example

Code example

Code example

Code example

Code example

Code examples

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example 2

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example