jqxDropDownButton Custom Element API Reference

animationType

string

'slide'

Sets or gets the animationType property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            animationType:"fade", theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

arrowSize

number

16

Sets or gets the arrowSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            arrowSize:20, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

autoOpen

boolean

false

Sets or gets the autoOpen property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            autoOpen:true, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

closeDelay

number

400

Sets or gets the closeDelay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            closeDelay:200, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

disabled

boolean

false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            disabled:true, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

dropDownHorizontalAlignment

string

'left'

Sets or gets the dropDownHorizontalAlignment property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            dropDownHorizontalAlignment:"right", theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

dropDownVerticalAlignment

string

'bottom'

Sets or gets the dropDownVerticalAlignment property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            dropDownVerticalAlignment:"top", theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

dropDownWidth

string | number

null

Sets or gets the dropDownWidth property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            dropDownWidth:200, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

enableBrowserBoundsDetection

boolean

false

Sets or gets the enableBrowserBoundsDetection property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            enableBrowserBoundsDetection:true, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

height

number

null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

initContent

function

null

Sets or gets the initContent property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            initContent:"initContent", theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

openDelay

number

350

Sets or gets the openDelay property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            openDelay:1000, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

popupZIndex

number

20000

Sets or gets the popupZIndex property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            popupZIndex:9999, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

rtl

boolean

false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            rtl:true, theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

template

string

'default'

Sets or gets the template property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            template:"success", theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

theme

string

''

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

width

number

null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {            theme:"light"       }    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

close

Event

Code examples

Bind to the close event of jqxDropDownButton.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		document.querySelector("jqx-drop-down-button").addEventListener("close", function(event) {			// Your code here.		});	};    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

open

Event

Code examples

Bind to the open event of jqxDropDownButton.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		document.querySelector("jqx-drop-down-button").addEventListener("open", function(event) {			// Your code here.		});	};    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

close

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		document.querySelector("jqx-drop-down-button").close();								}    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

destroy

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		document.querySelector("jqx-drop-down-button").destroy();								}    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

focus

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		document.querySelector("jqx-drop-down-button").focus();								}    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

getContent

Method

Parameter	Type	Description
None

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		var result = document.querySelector("jqx-drop-down-button").getContent();								}    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

isOpened

Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		var result = document.querySelector("jqx-drop-down-button").isOpened();								}    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

open

Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		document.querySelector("jqx-drop-down-button").open();								}    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

setContent

Method

Parameter	Type	Description
content	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DropDownList Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownbutton.js"></script>    <script>       JQXElements.settings["dropDownButton"] =       {                   }	window.onload = function() {		document.querySelector("jqx-drop-down-button").setContent('content');								}    </script></head><body> <jqx-drop-down-button settings="dropDownButton">     <jqx-tree style="border: none;" id='jqxTree'>         <ul>             <li item-selected='true'>Home</li>             <li item-expanded='true'>                 Solutions                 <ul>                     <li>Education</li>                     <li>Financial services</li>                     <li>Government</li>                     <li>Manufacturing</li>                     <li>                         Solutions                         <ul>                             <li>eLearning</li>                             <li>Mobile</li>                             <li>RIA</li>                             <li>Training</li>                         </ul>                     </li>                 </ul>             </li>             <li>                 Products                 <ul>                     <li>PC products</li>                     <li>Mobile products</li>                     <li>All products</li>                 </ul>             </li>         </ul>     </jqx-tree> </jqx-drop-down-button></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Code examples

Methods