jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
3,526 lines • 186 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<title>jqxListBox API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties
</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>autoHeight</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the listbox's height is equal to the sum of each item's height
</p>
<h4>Code example
</h4>
<p>
Set the <code>autoHeight</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({autoHeight:true}); </code></pre>
<p>
Get the <code>autoHeight</code> property.
</p>
<pre><code>var autoHeight = $('#jqxListBox').jqxListBox('autoHeight'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SnLa2/">autoHeight is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span42'>allowDrag(requires jqxdragdrop.js)</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the dragging of ListBox Items.
</p>
<h4>Code example
</h4>
<p>
Set the <code>allowDrag</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({allowDrag:true}); </code></pre>
<p>
Get the <code>allowDrag</code> property.
</p>
<pre><code>var allowDrag = $('#jqxListBox').jqxListBox('allowDrag'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/e7hBy/">allowDrag is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span43'>allowDrop(requires jqxdragdrop.js)</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the dropping of ListBox Items.
</p>
<h4>Code example
</h4>
<p>
Set the <code>allowDrop</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({allowDrop:true}); </code></pre>
<p>
Get the <code>allowDrop</code> property.
</p>
<pre><code>var allowDrop = $('#jqxListBox').jqxListBox('allowDrop'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hWEnH/">allowDrop is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>checkboxes</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the listbox should display a checkbox next to each item.
</p>
<h4>Code example
</h4>
<p>
Set the <code>checkboxes</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({checkboxes:true}); </code></pre>
<p>
Get the <code>checkboxes</code> property.
</p>
<pre><code>var checkboxes = $('#jqxListBox').jqxListBox('checkboxes'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8khqv/">checkboxes is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='property-name-disabled'>disabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the listbox.
</p>
<h4>Code example
</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$('#jqxListBox').jqxListBox({ disabled: true }); </code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxListBox').jqxListBox('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/etR3v/">disabled is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>displayMember</span>
</td>
<td>
<span>String</span>
</td>
<td>""
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example
</h4>
<p>
Set the <code>displayMember</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({displayMember: 'firstName'});</code></pre>
<p>
Get the <code>displayMember</code> property.
</p>
<pre><code>var displayMember = $('#jqxListBox').jqxListBox('displayMember'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QvpMX/">displayMember is set to text</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span44'>dropAction(requires jqxdragdrop.js)</span>
</td>
<td>
<span>String</span>
</td>
<td>'default'.
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the drop action when an item is dropped.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'default'</code></pre>
<pre><code>'copy'-adds a clone of the dropped item</code></pre>
<pre><code>'none'-means that the dropped item will not be added to a new collection and will not be removed from its parent collection</code></pre>
<h4>Code example
</h4>
<p>
Set the <code>dropAction</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({dropAction:'copy'}); </code></pre>
<p>
Get the <code>dropAction</code> property.
</p>
<pre><code>var dropAction = $('#jqxListBox').jqxListBox('dropAction'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/v88Hn/">dropAction is set to 'copy'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span47'>dragStart</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback function which is called when a drag operation starts.
</p>
<h4>Code example
</h4>
<p>
Set the <code>dragStart</code> property
</p>
<pre><code>$("#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;
}
});
</code></pre>
<p>
Get the <code>dragStart</code> property.
</p>
<pre><code>var dragStart = $('#jqxListBox').jqxListBox('dragStart'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9JdH7/">dragStart is set to custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span48'>dragEnd</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback function which is called when a drag operation ends.
</p>
<h4>Code example
</h4>
<p>
Set the <code>dragEnd</code> property
</p>
<pre><code>$("#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;
}
});
</code></pre>
<p>
Get the <code>dragEnd</code> property.
</p>
<pre><code>var dragEnd = $('#jqxListBox').jqxListBox('dragEnd'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WRYpX/">dragEnd is set to custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>enableHover</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the hover state.
</p>
<h4>Code example
</h4>
<p>
Set the <code>enableHover</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({enableHover: false}); </code></pre>
<p>
Get the <code>enableHover</code> property.
</p>
<pre><code>var enableHover = $('#jqxListBox').jqxListBox('enableHover'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Cqh6z/">enableHover is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>enableSelection</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the selection.
</p>
<h4>Code example
</h4>
<p>
Set the <code>enableSelection</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({enableSelection: false}); </code></pre>
<p>
Get the <code>enableSelection</code> property.
</p>
<pre><code>var enableSelection = $('#jqxListBox').jqxListBox('enableSelection'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/b9Qju/">enableSelection is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>equalItemsWidth</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the items width should be equal to the listbox's width.
</p>
<h4>Code example
</h4>
<p>
Set the <code>equalItemsWidth</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({equalItemsWidth:false}); </code></pre>
<p>
Get the <code>equalItemsWidth</code> property.
</p>
<pre><code>var equalItemsWidth = $('#jqxListBox').jqxListBox('equalItemsWidth'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Nubjv/">equalItemsWidth is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span70'>filterable</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether the Filtering is enabled.
</p>
<h4>Code example
</h4>
<p>
Set the <code>filterable</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({filterable:true}); </code></pre>
<p>
Get the <code>filterable</code> property.
</p>
<pre><code>var filterable = $('#jqxListBox').jqxListBox('filterable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xEqV9/">filterable is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span77'>filterHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>27
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the Filter's height.
</p>
<h4>Code example
</h4>
<p>
Set the <code>filterHeight</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({filterHeight:30}); </code></pre>
<p>
Get the <code>filterHeight</code> property.
</p>
<pre><code>var filterHeight = $('#jqxListBox').jqxListBox('filterHeight'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jX75m/">filterHeight is set to 30</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span76'>filterDelay</span>
</td>
<td>
<span>Number</span>
</td>
<td>100
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example
</h4>
<p>
Set the <code>filterDelay</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({filterDelay:300}); </code></pre>
<p>
Get the <code>filterDelay</code> property.
</p>
<pre><code>var filterDelay = $('#jqxListBox').jqxListBox('filterDelay'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/J3g47/">filterDelay is set to 300</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span78'>filterPlaceHolder</span>
</td>
<td>
<span>String</span>
</td>
<td>"Looking for"
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the Filter input's place holder.
</p>
<h4>Code example
</h4>
<p>
Set the <code>filterPlaceHolder</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({filterPlaceHolder:300}); </code></pre>
<p>
Get the <code>filterPlaceHolder</code> property.
</p>
<pre><code>var filterPlaceHolder = $('#jqxListBox').jqxListBox('filterPlaceHolder'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LfWCx/">filterPlaceHolder is set to "Filtering..."</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>height</span>
</td>
<td>
<span>String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the listbox's height.
</p>
<h4>Code example
</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({ width: '250px', height: '250px' }); </code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxListBox').jqxListBox('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7Lmbk/">height is set to '200px'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>hasThreeStates</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the checkboxes have three states - checked, unchecked and indeterminate.
</p>
<h4>Code example
</h4>
<p>
Set the <code>hasThreeStates</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({hasThreeStates:true}); </code></pre>
<p>
Get the <code>hasThreeStates</code> property.
</p>
<pre><code>var hasThreeStates = $('#jqxListBox').jqxListBox('hasThreeStates'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/C9eWk/">hasThreeStates is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>itemHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>-1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the height of the jqxListBox Items. When the itemHeight == - 1, each
item's height is equal to its desired height.
</p>
<h4>Code example
</h4>
<p>
Set the <code>itemHeight</code> property specified.
</p>
<pre><code>$("#jqxListBox").jqxListBox({itemHeight: 25});</code></pre>
<p>
Get the <code>itemHeight</code> property.
</p>
<pre><code>var itemHeight = $('#jqxListBox').jqxListBox('itemHeight'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KJ6V6/">itemHeight is set to 30</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>incrementalSearch</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example
</h4>
<p>
Set the <code>incrementalSearch</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({incrementalSearch: false});</code></pre>
<p>
Get the <code>incrementalSearch</code> property.
</p>
<pre><code>var incrementalSearch = $('#jqxListBox').jqxListBox('incrementalSearch'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8sFQu/">incrementalSearch is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span40'>incrementalSearchDelay</span>
</td>
<td>
<span>Number</span>
</td>
<td>700
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example
</h4>
<p>
Set the <code>incrementalSearchDelay</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({incrementalSearchDelay: 400});</code></pre>
<p>
Get the <code>incrementalSearchDelay</code> property.
</p>
<pre><code>var incrementalSearchDelay = $('#jqxListBox').jqxListBox('incrementalSearchDelay'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Q5dyR/">incrementalSearchDelay is set to 150</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>multiple</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the multiple selection. When this property is set to true, the
user can select multiple items.
</p>
<h4>Code example
</h4>
<p>
Set the <code>multiple</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({multiple: true}); </code></pre>
<p>
Get the <code>multiple</code> property.
</p>
<pre><code>var multiple = $('#jqxListBox').jqxListBox('multiple'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YNEQj/">multiple is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span54'>multipleextended</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example
</h4>
<p>
Set the <code>multipleextended</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({multipleextended: true}); </code></pre>
<p>
Get the <code>multipleextended</code> property.
</p>
<pre><code>var multipleextended = $('#jqxListBox').jqxListBox('multipleextended'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/U6GFk/">multipleextended is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span52'>renderer</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback function which is called when an item is rendered. By using the renderer function, you can customize the look of the list items.
</p>
<h4>Code example
</h4>
<p>
Set the <code>renderer</code> property
</p>
<pre><code>$('#jqxListBox').jqxListBox({renderer: function (index, label, value)
{
var datarecord = data[index];
return datarecord.firstname + " " + datarecord.lastname;
}
});
</code></pre>
<p>
Get the <code>renderer</code> property.
</p>
<pre><code>var renderer = $('#jqxListBox').jqxListBox('renderer'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ANfqF/">renderer is set to custom rendering function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span68'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
<h4>Code example
</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$('#jqxListBox').jqxListBox({rtl : true}); </code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxListBox').jqxListBox('rtl'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GSACT/">rtl is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>selectedIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>-1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the selected index.
</p>
<h4>Code example
</h4>
<p>
Set the <code>selectedIndex</code> propert.
</p>
<pre><code>$("#jqxListBox").jqxListBox({selectedIndex: 2 }); </code></pre>
<p>
Get the <code>selectedIndex</code> property.
</p>
<pre><code>var selectedIndex = $('#jqxListBox').jqxListBox('selectedIndex'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TUKkc/">selectedIndex is set to 2</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>source</span>
</td>
<td>
<span>Array</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the item's source.
</p>
<h4>Code example
</h4>
<p>
Set the <code>source</code> property.
</p>
<pre><code>var data = [</code></pre>
<pre><code>"Affogato",</code></pre>
<pre><code>"Americano",</code></pre>
<pre><code>"Bicerin"</code></pre>
<pre><code>];</code></pre>
<pre><code>$("#jqxListBox").jqxListBox({source: data});</code></pre>
<br />
Binding using the jqx.dataAdapter(requires jqxdata.js):
<pre><code>
// 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});
</code></pre>
<p>
Get the <code>source</code> property.
</p>
<pre><code>var source = $('#jqxListBox').jqxListBox('source'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ePZuv/">source is set to source</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>scrollBarSize</span>
</td>
<td>
<span>Number</span>
</td>
<td>17
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the scrollbars's size.
</p>
<h4>Code example
</h4>
<p>
Set the <code>scrollBarSize</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({scrollBarSize: 25});</code></pre>
<p>
Get the <code>scrollBarSize</code> property.
</p>
<pre><code>var scrollBarSize = $('#jqxListBox').jqxListBox('scrollBarSize'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HrVcs/">scrollBarSize is set to 15</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span39'>searchMode</span>
</td>
<td>
<span>String</span>
</td>
<td>startswith
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'none'</code></pre>
<pre><code>'contains'</code></pre>
<pre><code>'containsignorecase'</code></pre>
<pre><code>'equals'</code></pre>
<pre><code>'equalsignorecase'</code></pre>
<pre><code>'startswithignorecase'</code></pre>
<pre><code>'startswith'</code></pre>
<pre><code>'endswithignorecase'</code></pre>
<pre><code>'endswith'</code></pre>
<h4>Code example
</h4>
<p>
Set the <code>searchMode</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({searchMode: 'contains' }); </code></pre>
<p>
Get the <code>searchMode</code> property.
</p>
<pre><code>var searchMode = $('#jqxListBox').jqxListBox('searchMode'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/r9E5j/">searchMode is set to 'startswithignorecase'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
In order to set a theme, you need to do the following:
<ul>
<li>Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
</code></pre>
</code></pre>
</li>
<li>Set the widget's theme property to 'energyblue' when you initialize it.
</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/h5Fcs/">theme is set to 'energyblue'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>valueMember</span>
</td>
<td>
<span>String</span>
</td>
<td>""
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example
</h4>
<p>
Set the <code>valueMember</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({valueMember: 'lastName'});</code></pre>
<p>
Get the <code>valueMember</code> property.
</p>
<pre><code>var valueMember = $('#jqxListBox').jqxListBox('valueMember'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YnqPP/">valueMember is set to value</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>width</span>
</td>
<td>
<span>String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the listbox's width.
</p>
<h4>Code example
</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$("#jqxListBox").jqxListBox({ width: '250px', height: '250px' }); </code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxListBox').jqxListBox('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EmLTL/">width is set to '200px'</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span62'>bindingComplete</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the data binding operation is completed.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>bindingComplete</code> event by type: jqxListBox.
</p>
<pre><code>
$("#jqxListBox").on('bindingComplete', function (event) {
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SQ4dM/">Bind to the bindingComplete event by type:jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>change</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user selects an item.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>change</code> by type: jqxListBox.
</p>
<pre><code>
$('#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.
}
});
</code></pre>
The item object has the following fields:
<br />
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MMcmc/">Bind to the change event by type:jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>checkChange</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user checks or unchecks an item.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>checkChange</code> event by type: jqxListBox.
</p>
<pre><code>
$("#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');
});
</code></pre>
The item object has the following fields:
<br />
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/h7u2M/">Bind to the checkChange event by type:jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span45'>dragStart</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user starts a drag operation.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>dragStart</code> event by type: jqxListBox.
</p>
<pre><code>
$("#jqxListBox").on('dragStart', function (event) {
var args = event.args;
var label = args.label;
var value = args.value;
var originalEvent = args.originalEvent;
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pXed3/">Bind to the dragStart event by type:jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span46'>dragEnd</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user drops an item.
</p>
<h4>Code example
</h4>
<p>
Bind to the drag<code>dragEnd</code>nd event by type: jqxListBox.
</p>
<pre><code>
$("#jqxListBox").on('dragEnd', function (event) {
var args = event.args;
var label = args.label;
var value = args.value;
var originalEvent = args.originalEvent;
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8QbQb/">Bind to the dragEnd event by type:jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>select</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user selects an item.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>select</code> event by type: jqxListBox.
</p>
<pre><code>
$('#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.
}
});
</code></pre>
The item object has the following fields:
<br />
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wEDq8/">Bind to the select event by type:jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>unselect</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user unselects an item.
</p>
<h4>Code example
</h4>
<p>
Bind to the <code>unselect</code> event by type: jqxListBox.
</p>
<pre><code>
$('#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;
}
});
</code></pre>
The item object has the following fields:
<br />
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pZWr3/">Bind to the unselect event by type:jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Methods
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>addItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Adds a new item to the jqxListBox. Returns 'true', if the new item is added or 'false' if the item is not added.
</p>
<br />
The following fields can be used for the new item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>addItem</code> method.
</p>
<pre><code>// @param String</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('addItem', 'jQuery' ); </code></pre>
<h4>Code example 2
</h4>
<p>
Invoke the <code>addItem</code> method.
</p>
<pre><code>// @param Object</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('addItem', { label: 'Text' value: 'Id'} ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YkeU9/">adds an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span50'>beginUpdate</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Stops the ListBox's rendering. That method is usually used when multiple items need to be inserted or removed dynamically.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>beginUpdate</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('beginUpdate'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/0721wayw/">beginUpdate is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span41'>clear</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears all items.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>clear</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('clear'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hhQKp/">clears all items in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>clearSelection</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears all selected items.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>clearSelection</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('clearSelection'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JyExE/">clears the selection in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>checkIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>checkIndex</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('checkIndex', 0); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/T6RLq/">checks a box in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span58'>checkItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Checks an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>checkItem</code> method.
</p>
<pre><code>// @param jqxListBox Item</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('checkItem', item ); </code></pre>
*To get an item, use the getItem or getItemByValue methods.
<br />
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vv3gK/">checks item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>checkAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Checks all list items when the 'checkboxes' property value is true.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>checkAll</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('checkAll'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MkAjD/">checks all items in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span80'>clearFilter</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears the widget's filter when filtering is applied.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples
</h4>
<p>
Invoke the <code>clearFilter</code> method.
</p>
<pre><code>$('#jqxListBox').jqxListBox('clearFilter'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lprfgq1m/">clears the jqxListBox's Filter.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span66'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Destroy the jqxListBox widget. The destroy method removes the jqxListBox widget from the web page.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxListBox').jqxListBox('destroy');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Q6MRt/">destroys the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span74'>disableItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Disables an item. Item is an Object.
</p>
<br />
The following fields can be used for the item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>disableItem</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('disableItem', "jQuery" ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nXA45/">disables an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>disableAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Disables an item by index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>disableAt</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('disableAt', 8 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EFV6x/">disables an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span75'>enableItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables an item. Item is an Object.
</p>
<br />
The following fields can be used for the item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>enableItem</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('enableItem', "jQuery" ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RtYbF/">enables an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>enableAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables a disabled item by index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>enableAt</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('enableAt', 3 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Hgdce/">enables an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>ensureVisible</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Number/String/Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>ensureVisible</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>// @optional param Boolean - determines whether to make the item to be the top visible item in the list</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('ensureVisible', 2 ); </code></pre>
<pre><code>$("#jqxListBox").jqxListBox('ensureVisible', "Iced Coffee" ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Kd8mw/">ensures the visibility of an items in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>endUpdate</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>endUpdate</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('endUpdate'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/0721wayw/">endUpdate is invoked.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span55'>focus</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the focus to the jqxListBox.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>focus</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('focus'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dGv4J/">focuses the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>getItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets all items. The returned value is an array of Items.
</p>
Each item represents an Object with the following fields.
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>getItems</code> method.
</p>
<pre><code>var items = $("#jqxListBox").jqxListBox('getItems'); </code></pre>
Get the first item.
<pre><code>var items = $("#jqxListBox").jqxListBox('getItems'); var firstItem = items[0]; </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SDJqH/">returns an Array of all items and displays them </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span49'>getSelectedItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the selected ListBox items. The returned value is an Array of items.
</p>
Each item represents an Object with the following fields.
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Arrays</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>getSelectedItems</code> method.
</p>
<pre><code>var items = $("#jqxListBox").jqxListBox('getSelectedItems'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3F4DA/">gets the selected items in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span53'>getCheckedItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the checked ListBox items. Returns an Array of checked items.
</p>
Each item represents an Object with the following fields.
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>getCheckedItems</code> method.
</p>
<pre><code>var items = $("#jqxListBox").jqxListBox('getCheckedItems'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5eMvx/">returns an Array of all checked items and displays them </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>getItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets an item by index. The returned value is an Object with the following fields:
</p>
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>getItem</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>var item = $("#jqxListBox").jqxListBox('getItem', 1 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MxBma/">gets the an item by its index in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span61'>getItemByValue</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets an item by its value. The returned value is an Object with the following fields:
</p>
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>getItemByValue</code> method.
</p>
<pre><code>// @param Value</code></pre>
<pre><code>var item = $("#jqxWidget").jqxListBox('getItemByValue', "Bon app'");</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TPdvH/">gets the item by its value in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span33'>getSelectedItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the selected item. The returned value is an Object or null(if there is no selected item).
</p>
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>getSelectedItem</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>var item = $("#jqxListBox").jqxListBox('getSelectedItem'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/unxYm/">gets the selected item by its value in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>getSelectedIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Number</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>getSelectedIndex</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>var index = $("#jqxListBox").jqxListBox('getSelectedIndex'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UJs3A/">returns the selected item's index and displays it </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>insertAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
The following fields can be used for the new item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
<tr>
<td><em>Index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>insertAt</code> method.
</p>
<pre><code>// @param String</code></pre>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('insertAt', 'jQuery', 1 ); </code></pre>
<h4>Code example 2
</h4>
<p>
Invoke the <code>insertAt</code> method.
</p>
<pre><code>// @param Object</code></pre>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('insertAt', '{ label: 'Text' value: 'Id'}, 1 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WEs9x/">inserts an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span67'>invalidate</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>The invalidate method will repaint the jqxListBox's items.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>invalidate</code> method.
</p>
<pre><code>$('#jqxListBox').jqxListBox('invalidate');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/eccsD/">invalidates the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span60'>indeterminateItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Indeterminates an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>indeterminateItem</code> method.
</p>
<pre><code>// @param jqxListBox Item</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('indeterminateItem', item ); </code></pre>
*To get an item, use the getItem or getItemByValue methods.
<br />
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m33Ff/">indeterminate item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>indeterminateIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>indeterminateIndex</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('indeterminateIndex', 0); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BzRDp/">indeterminate a box in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span71'>removeItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>removeItem</code> method.
</p>
<pre><code>// @param Object</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('removeItem', "List Item" ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TKhjr/">removes an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>removeAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>removeAt</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('removeAt', 3 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DfsTq/">removes an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span64'>render</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Renders the jqxListBox widget.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>render</code> method.
</p>
<pre><code>$('#jqxListBox').jqxListBox('render');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DNkZR/">renders the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span65'>refresh</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Refreshes the jqxListBox widget. The refresh method will update the jqxListBox's layout, size and data.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>refresh</code> method.
</p>
<pre><code>$('#jqxListBox').jqxListBox('refresh');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6qC79/">refreshes the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span56'>selectItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Selects an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>selectItem</code> method.
</p>
<pre><code>// @param jqxListBox Item</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('selectItem', item ); </code></pre>
*To get an item, use the getItem or getItemByValue methods.
<br />
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8MaPZ/">select item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>selectIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>selectIndex</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('selectIndex', 0 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/E7xHX/">select an item by its index in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span72'>updateItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<br />
The following fields can be used for the item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>Item</em></td>
<td>Object/String</td>
<td></td>
</tr>
<tr>
<td><em>Value</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>updateItem</code> method.
</p>
<pre><code>// @param Object</code></pre>
<pre><code>// @param Object</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('updateItem', { label: "Text", value: "Id1" }, "Antonio Moreno Taquera");</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YCK47/">updates an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span73'>updateAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Updates an item. The first parameter is the new item. The second parameter is the index of the item to be updated.
</p>
<br />
The following fields can be used for the item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>updateAt</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('updateAt', { label: "Text", value: "Id1" }, 3 );</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/k4bUK/">updates an item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>unselectIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>unselectIndex</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('unselectIndex', 5 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vtSBP/">unselect an item by its index in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span57'>unselectItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unselects an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>unselectItem</code> method.
</p>
<pre><code>// @param jqxListBox Item</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('unselectItem', item ); </code></pre>
*To get an item, use the getItem or getItemByValue methods.
<br />
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uFSmv/">unselect item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>uncheckIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>uncheckIndex</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('uncheckIndex', 0); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/63jwz/">unchecks a box in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span59'>uncheckItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unchecks an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>uncheckItem</code> method.
</p>
<pre><code>// @param jqxListBox Item</code></pre>
<pre><code>$("#jqxListBox").jqxListBox('uncheckItem', item ); </code></pre>
*To get an item, use the getItem or getItemByValue methods.
<br />
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TF38W/">unchecks item in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>uncheckAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unchecks all list items when the 'checkboxes' property value is true.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>uncheckAll</code> method.
</p>
<pre><code>$("#jqxListBox").jqxListBox('uncheckAll'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WZH7G/">unchecks all items in the jqxListBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span69'>val</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the selected value.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>value</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>String</em>
</div>
<h4>Code example
</h4>
<p>
Invoke the <code>val</code> method.
</p>
// Get the value.
<pre><code>var value = $("#jqxListBox").jqxListBox('val');</code></pre>
// Get the value using jQuery's val()
<pre><code>var value = $("#jqxListBox").val();</code></pre>
// Set value.
<pre><code>$("#jqxListBox").jqxListBox('val', 'New Value');</code></pre>
// Set value using jQuery's val().
<pre><code>$("#jqxListBox").val('New Value');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LTdeV/">sets or gets the selected value in the jqxListBox </a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>