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> <meta name="keywords" content="jQuery, List, ListBox, DropDownList, Popup List, DropDown List, Input" /> <meta name="description" content="This page represents the help documentation of the jqxDropDownList widget." /> <title>jqxDropDownList 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='Span50'>autoOpen</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 DropDown is automatically opened when the mouse cursor is moved over the widget. </p> <h4>Code example</h4> <p> Set the <code>autoOpen</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({ autoOpen: true }); </code></pre> <p> Get the <code>autoOpen</code> property. </p> <pre><code>var autoOpen = $('#jqxDropDownList').jqxDropDownList('autoOpen'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/S5RcC/">autoOpen is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span82'>autoItemsHeight</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 items will wrap when they reach the width of the dropDown. </p> <h4>Code example</h4> <p> Set the <code>autoItemsHeight</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({autoItemsHeight: true}); </code></pre> <p> Get the <code>autoItemsHeight</code> property. </p> <pre><code>var autoItemsHeight = $('#jqxDropDownList').jqxDropDownList('autoItemsHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/77qo6wvp/">autoItemsHeight is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span26'>autoDropDownHeight</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 height of the jqxDropDownList's ListBox displayed in the widget's DropDown is calculated as a sum of the items heights. </p> <h4>Code example</h4> <p> Set the <code>autoDropDownHeight</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({autoDropDownHeight: true}); </code></pre> <p> Get the <code>autoDropDownHeight</code> property. </p> <pre><code>var autoDropDownHeight = $('#jqxDropDownList').jqxDropDownList('autoDropDownHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GH4cN/">autoDropDownHeight is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span42'>animationType</span> </td> <td> <span>String</span> </td> <td>'slide' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the type of the animation. </p> <b>Possible Values:</b> <br /> <pre><code>'fade'</code></pre> <pre><code>'slide'</code></pre> <pre><code>'none'</code></pre> <h4>Code example</h4> <p> Set the <code>animationType</code> property </p> <pre><code>$('#jqxDropDownList').jqxDropDownList({animationType: 'none'}); </code></pre> <p> Get the <code>animationType</code> property. </p> <pre><code>var animationType = $('#jqxDropDownList').jqxDropDownList('animationType'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/snQLr/">animationType is set to 'fade'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span56'>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> Determines whether checkboxes will be displayed next to the list items. (The feature requires jqxcheckbox.js) </p> <h4>Code example</h4> <p> Set the <code>checkboxes</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({checkboxes:true}); </code></pre> <p> Get the <code>checkboxes</code> property. </p> <pre><code>var checkboxes = $('#jqxDropDownList').jqxDropDownList('checkboxes'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CLB86/">checkboxes is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span30'>closeDelay</span> </td> <td> <span>Number</span> </td> <td>400 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the delay of the 'close' animation. </p> <h4>Code example</h4> <p> Set the clos<code>closeDelay</code>Delay property </p> <pre><code>$('#jqxDropDownList').jqxDropDownList({closeDelay: 200}); </code></pre> <p> Get the <code>closeDelay</code> property. </p> <pre><code>var closeDelay = $('#jqxDropDownList').jqxDropDownList('closeDelay'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JEfw2/">closeDelay is set to 2000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>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 jqxDropDownList. </p> <h4>Code example</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({ disabled: true }); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxDropDownList').jqxDropDownList('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GLjm8/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>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>$("#jqxDropDownList").jqxDropDownList({displayMember: 'firstName'});</code></pre> <p> Get the <code>displayMember</code> property. </p> <pre><code>var displayMember = $('#jqxDropDownList').jqxDropDownList('displayMember'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CHPax/">displayMember is set to 'text'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>dropDownHorizontalAlignment</span> </td> <td> <span>String</span> </td> <td>'left' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the DropDown's alignment. </p> <b>Possible Values:</b> <br /> <pre><code>'left'</code></pre> <pre><code>'right'</code></pre> <h4>Code example</h4> <p> Set the <code>dropDownHorizontalAlignment</code> property. </p> <pre><code>$('#jqxDropDownList').jqxDropDownList({ dropDownHorizontalAlignment: 'right'}); </code></pre> <p> Get the <code>dropDownHorizontalAlignment</code> property. </p> <pre><code>var dropDownHorizontalAlignment = $('#jqxDropDownList').jqxDropDownList('dropDownHorizontalAlignment'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8GGjT/">dropDownHorizontalAlignment is set to 'right'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span85'>dropDownVerticalAlignment</span> </td> <td> <span>String</span> </td> <td>'bottom' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the DropDown's alignment. </p> <b>Possible Values:</b> <br /> <pre><code>'top'</code></pre> <pre><code>'bottom'</code></pre> <h4>Code example</h4> <pre><code>$('#jqxDropDownList').jqxDropDownList({ dropDownVerticalAlignment: 'top'}); </code></pre> <p> Get the <code>dropDownVerticalAlignment</code> property. </p> <pre><code>var dropDownVerticalAlignment = $('#jqxDropDownList').jqxDropDownList('dropDownVerticalAlignment');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/z6ex9buv/">dropDownVerticalAlignment is set to "top"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span14'>dropDownHeight</span> </td> <td> <span>Number</span> </td> <td>200 </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 jqxDropDownList's ListBox displayed in the widget's DropDown. </p> <h4>Code example</h4> <p> Set the <code>dropDownHeight</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({dropDownHeight: 250}); </code></pre> <p> Get the <code>dropDownHeight</code> property. </p> <pre><code>var dropDownHeight = $('#jqxDropDownList').jqxDropDownList('dropDownHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yfMAJ/">dropDownHeight is set to 200</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span15'>dropDownWidth</span> </td> <td> <span>Number</span> </td> <td>200 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the width of the jqxDropDownList's ListBox displayed in the widget's DropDown. </p> <h4>Code example</h4> <p> Set the <code>dropDownWidth</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({dropDownWidth: 250}); </code></pre> <p> Get the <code>dropDownWidth</code> property. </p> <pre><code>var dropDownWidth = $('#jqxDropDownList').jqxDropDownList('dropDownWidth'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aL9be/">dropDownWidth is set to 210</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>$("#jqxDropDownList").jqxDropDownList({enableSelection:false}); </code></pre> <p> Get the <code>enableSelection</code> property. </p> <pre><code>var enableSelection = $('#jqxDropDownList').jqxDropDownList('enableSelection'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SaBGE/">enableSelection is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span32'>enableBrowserBoundsDetection</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 dropdown detects the browser window's bounds and automatically adjusts the dropdown's position. </p> <h4>Code example</h4> <p> Set the <code>enableBrowserBoundsDetection</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({enableBrowserBoundsDetection:false}); </code></pre> <p> Get the <code>enableBrowserBoundsDetection</code> property. </p> <pre><code>var enableBrowserBoundsDetection = $('#jqxDropDownList').jqxDropDownList('enableBrowserBoundsDetection'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pjEYJ/">enableBrowserBoundsDetection is set to true</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>$("#jqxDropDownList").jqxDropDownList({enableHover: false}); </code></pre> <p> Get the <code>enableHover</code> property. </p> <pre><code>var enableHover = $('#jqxDropDownList').jqxDropDownList('enableHover'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mReYg/">enableHover is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span17'>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>$("#jqxDropDownList").jqxDropDownList({filterable:true}); </code></pre> <p> Get the <code>filterable</code> property. </p> <pre><code>var filterable = $('#jqxDropDownList').jqxDropDownList('filterable'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ph5S6/">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>$("#jqxDropDownList").jqxDropDownList({filterHeight:30}); </code></pre> <p> Get the <code>filterHeight</code> property. </p> <pre><code>var filterHeight = $('#jqxDropDownList').jqxDropDownList('filterHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RnpYb/">filterHeight is set to 30</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span78'>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>$("#jqxDropDownList").jqxDropDownList({filterDelay:300}); </code></pre> <p> Get the <code>filterDelay</code> property. </p> <pre><code>var filterDelay = $('#jqxDropDownList').jqxDropDownList('filterDelay'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PT988/">filterDelay is set to 300</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span79'>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>$("#jqxDropDownList").jqxDropDownList({filterPlaceHolder:300}); </code></pre> <p> Get the <code>filterPlaceHolder</code> property. </p> <pre><code>var filterPlaceHolder = $('#jqxDropDownList').jqxDropDownList('filterPlaceHolder'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GY7LM/">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>Number/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 jqxDropDownList's height. </p> <h4>Code example</h4> <p> Set the <code>height</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({ height: '250px' }); </code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxDropDownList').jqxDropDownList('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hYM69/">height is set to 20</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, jqxDropDownList automatically selects the found item. </p> <h4>Code example</h4> <p> Set the <code>incrementalSearch</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({incrementalSearch: false});</code></pre> <p> Get the <code>incrementalSearch</code> property. </p> <pre><code>var incrementalSearch = $('#jqxDropDownList').jqxDropDownList('incrementalSearch'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LQEmK/">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 or 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>$("#jqxDropDownList").jqxDropDownList({incrementalSearchDelay: 400});</code></pre> <p> Get the <code>incrementalSearchDelay</code> property. </p> <pre><code>var incrementalSearchDelay = $('#jqxDropDownList').jqxDropDownList('incrementalSearchDelay'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/k9Mxj/">incrementalSearchDelay is set to 100</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 jqxDropDownList 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. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({itemHeight: 25}); </code></pre> <p> Get the <code>itemHeight</code> property. </p> <pre><code>var itemHeight = $('#jqxDropDownList').jqxDropDownList('itemHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uY2fK/">itemHeight is set to 30</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span29'>openDelay</span> </td> <td> <span>Number</span> </td> <td>350 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the delay of the 'open' animation. </p> <h4>Code example</h4> <p> Set the <code>openDelay</code> property </p> <pre><code>$('#jqxDropDownList').jqxDropDownList({openDelay: 200}); </code></pre> <p> Get the <code>openDelay</code> property. </p> <pre><code>var openDelay = $('#jqxDropDownList').jqxDropDownList('openDelay'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Y6EPt/">openDelay is set to 2000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span55'>placeHolder</span> </td> <td> <span>String</span> </td> <td>"Please Choose:" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Text displayed when the selection is empty. </p> <h4>Code example</h4> <p> Set the <code>promptText</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({placeHolder: "Select:"}); </code></pre> <p> Get the <code>promptText</code> property. </p> <pre><code>var promptText = $('#jqxDropDownList').jqxDropDownList('placeHolder'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7UBGc/">promptText is set to 'Select'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span73'>popupZIndex</span> </td> <td> <span>Number</span> </td> <td>20000 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the popup's z-index. </p> <h4>Code example</h4> <p> Set the <code>popupZIndex</code> property. </p> <pre><code>$("#jqxDropDownList").jqxDropDownList({popupZIndex: 999999});</code></pre> <p> Get the <code>popupZIndex</code> property. </p> <pre><code>var zIndex = $('#jqxDropDownList').jqxDropDownList('popupZIndex'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mrb6Y/">popupZIndex is set to 9999</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span67'>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>$('#jqxDropDownList').jqxDropDownList({rtl : true}); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxDropDownList').jqxDropDownList('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FCTMQ/">rtl 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>$('#jqxDropDownList').jqxDropDownList({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 = $('#jqxDropDownList').jqxDropDownList('renderer'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GGPFp/">renderer is set to a custom rendering function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span48'>selectionRenderer</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 the selected item is rendered in the jqxDropDownList's content area. By using the selectionRenderer function, you can customize the look of the selected item. </p> <h4>Code example</h4> <p> Set the <code>selectionRenderer</code> property </p> <pre><code>$('#jqxDropDownList').jqxDropDownList({selectionRenderer: function (htmlString) { return "My String"; } }); </code></pre> <p> Get the <code>selectionRenderer</code> property. </p> <