jqwidgets-framework

<!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> </t