jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

Custom Elements

  • Javascript/jQuery
  • Angular
  • React
  • Vue
  • Custom Elements
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

Custom Elements

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxTagCloud
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxSortable
  • jqxPanel
  • jqxDockingLayout

jqxListbox

  • Default Functionality
  • ListBox Filter
  • ListBox Inline HTML
  • ListBox with Javascript
  • Text with Icons
  • Categories
  • Multiple selection
  • Selection with Shift & Ctrl
  • Binding to Array
  • Binding to XML
  • Binding to JSON Data
  • Items Reorder
  • Drag & Drop
  • Custom Rendering
  • Checkbox
  • Filtering
  • Load data from select
  • Fluid Size
  • Events
  • Keyboard Navigation
  • Right to Left Navigation
Theme:
  • Demo
  • View Source
  • API Reference
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Custom Element ListBox DefaultFunctionality</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" />
<meta name="description" content="This is an example of the default functionalities in Angular ListBox." />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script>
var source = [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cafe Bombon',
'Cafe au lait',
'Caffe Corretto',
'Cafe Crema',
'Caffe Latte',
'Caffe macchiato',
'Cafe melange',
'Coffee milk',
'Cafe mocha',
'Cappuccino',
'Carajillo',
'Cortado',
'Cuban espresso',
'Espresso',
'Eiskaffee',
'The Flat White',
'Frappuccino',
'Galao',
'Greek frappe coffee',
'Iced Coffee',
'Indian filter coffee',
'Instant coffee',
'Irish coffee',
'Liqueur coffee'
];
JQXElements.settings['ListBoxSettings'] =
{
selectedIndex: 3,
source: source
}
</script>
</head>
<body>
<div class="example-description">
The Custom element ListBox represents a widget that contains a list of selectable items.
</div>
<jqx-list-box settings="ListBoxSettings"></jqx-list-box>
</body>
</html>

Properties

autoHeight boolean false

Sets or gets the autoHeight 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,autoHeight:true, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
allowDrag boolean false

Sets or gets the allowDrag 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,allowDrag:true, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
allowDrop boolean false

Sets or gets the allowDrop 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,allowDrop:true, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
checkboxes boolean false

Sets or gets the checkboxes 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,checkboxes:true, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,disabled:true, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
displayMember string ""

Sets or gets the displayMember 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, displayMember:"text", theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
dropAction string 'default'.

Sets or gets the dropAction 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, dropAction:"copy", theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
dragStart function null

Sets or gets the dragStart 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, dragStart:"dragStart", theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
dragEnd function null

Sets or gets the dragEnd 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, dragEnd:"dragEnd", theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
enableHover boolean true

Sets or gets the enableHover 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,enableHover:false, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
enableSelection boolean true

Sets or gets the enableSelection 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,enableSelection:false, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
equalItemsWidth boolean true

Sets or gets the equalItemsWidth 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,equalItemsWidth:false, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
filterable boolean false

Sets or gets the filterable 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,filterable:true, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
filterHeight number 27

Sets or gets the filterHeight 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,filterable:true,filterHeight:30, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
filterDelay number 100

Sets or gets the filterDelay 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,filterable:true,filterDelay:300, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
filterPlaceHolder string "Looking for"

Sets or gets the filterPlaceHolder 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items,filterable:true, filterPlaceHolder:"Filtering...", theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
height string | 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
hasThreeStates boolean false

Sets or gets the hasThreeStates 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",hasThreeStates:true
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
itemHeight number -1

Sets or gets the itemHeight 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",itemHeight:30
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
incrementalSearch boolean true

Sets or gets the incrementalSearch 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",incrementalSearch:false
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
incrementalSearchDelay number 700

Sets or gets the incrementalSearchDelay 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",incrementalSearchDelay:150
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
multiple boolean false

Sets or gets the multiple 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",multiple:true
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
multipleextended boolean false

Sets or gets the multipleextended 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",multipleextended:true
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
renderer function null

Sets or gets the renderer 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light", renderer:"renderer"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
rendered function null

Sets or gets the rendered 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light", rendered:"rendered"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",rtl:true
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
selectedIndex number -1

Sets or gets the selectedIndex 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",selectedIndex:2
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
selectedIndexes object

Sets or gets the selectedIndexes 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light", selectedIndex:"selectedIndex"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
source array null

Sets or gets the source 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
scrollBarSize number 17

Sets or gets the scrollBarSize 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light",scrollBarSize:15
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
searchMode string startswith

Sets or gets the searchMode 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light", searchMode:"startswithignorecase"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
valueMember string ""

Sets or gets the valueMember 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light", valueMember:"value"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>
width string | 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

Events

bindingComplete Event

Code examples

Bind to the bindingComplete event of jqxListBox.

<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-list-box").addEventListener("bindingComplete", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

change Event

Code examples

Bind to the change event of jqxListBox.

<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-list-box").addEventListener("change", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

checkChange Event

Code examples

Bind to the checkChange event of jqxListBox.

<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-list-box").addEventListener("checkChange", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

dragStart Event

Code examples

Bind to the dragStart event of jqxListBox.

<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-list-box").addEventListener("dragStart", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

dragEnd Event

Code examples

Bind to the dragEnd event of jqxListBox.

<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-list-box").addEventListener("dragEnd", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

select Event

Code examples

Bind to the select event of jqxListBox.

<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-list-box").addEventListener("select", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

unselect Event

Code examples

Bind to the unselect event of jqxListBox.

<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
source:items, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-list-box").addEventListener("unselect", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

Methods

addItem Method
Parameter Type Description
Item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").addItem(layout);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

beginUpdate 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").beginUpdate();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

clear 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").clear();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

clearSelection 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").clearSelection();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

checkIndex Method
Parameter Type Description
Index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").checkIndex(3);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

checkItem Method
Parameter Type Description
Item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").checkItem(Item1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

checkAll 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").checkAll();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

clearFilter 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").clearFilter();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").destroy();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

disableItem Method
Parameter Type Description
Item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").disableItem(Item1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

disableAt Method
Parameter Type Description
Index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").disableAt(0);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

enableItem Method
Parameter Type Description
Item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").enableItem(Item1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

enableAt Method
Parameter Type Description
Index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").enableAt(1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

ensureVisible Method
Parameter Type Description
item number/string/object
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").ensureVisible(1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

endUpdate 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").endUpdate();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").focus();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

getItems Method
Parameter Type Description
None
Return Value
Array
<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
var result = document.querySelector("jqx-list-box").getItems();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

getSelectedItems Method
Parameter Type Description
None
Return Value
Arrays
<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
var result = document.querySelector("jqx-list-box").getSelectedItems();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

getCheckedItems Method
Parameter Type Description
None
Return Value
Array
<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
var result = document.querySelector("jqx-list-box").getCheckedItems();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

getItem Method
Parameter Type Description
Index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
var result = document.querySelector("jqx-list-box").getItem();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

getItemByValue Method
Parameter Type Description
Item object/string
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").getItemByValue(Item1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

getSelectedItem 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
var result = document.querySelector("jqx-list-box").getSelectedItem();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

getSelectedIndex Method
Parameter Type Description
None
Return Value
Number
<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
var result = document.querySelector("jqx-list-box").getSelectedIndex();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

insertAt Method
Parameter Type Description
Item object/string
Index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").insertAt(Item1,0);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

invalidate 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").invalidate();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

indeterminateItem Method
Parameter Type Description
Item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").indeterminateItem(Item);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

indeterminateIndex Method
Parameter Type Description
Index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").indeterminateIndex(0);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

loadFromSelect Method
Parameter Type Description
selector 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").loadFromSelect(select);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

removeItem Method
Parameter Type Description
Item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").removeItem(Item1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

removeAt Method
Parameter Type Description
Index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").removeAt(0);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

render 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").render();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

refresh 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").refresh();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

selectItem Method
Parameter Type Description
Item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").selectItem(Item1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

selectIndex Method
Parameter Type Description
Index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").selectIndex(1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

updateItem Method
Parameter Type Description
Item object/string
Value 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").updateItem(Item1,Item2);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

updateAt Method
Parameter Type Description
item object/string
index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").updateAt(Item,0);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

unselectIndex Method
Parameter Type Description
index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").unselectIndex(0);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

unselectItem Method
Parameter Type Description
item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").unselectItem(Item);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

uncheckIndex Method
Parameter Type Description
index number
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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").uncheckIndex(0);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

uncheckItem Method
Parameter Type Description
item object/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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").uncheckItem(Item1);
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

uncheckAll 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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
document.querySelector("jqx-list-box").uncheckAll();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

val Method
Parameter Type Description
value string
Return Value
String
<!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/site.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
<script>
var items = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Cafe Bombon",
"Cafe au lait",
"Caffe Corretto",
"Cafe Crema",
"Caffe Latte",
"Caffe macchiato",
"Cafe melange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappe coffee",
"Iced Coffee?",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
JQXElements.settings["listBoxSettings"] =
{
}
window.onload = function() {
var result = document.querySelector("jqx-list-box").val();
}
</script>
</head>
<body>
<jqx-list-box settings="listBoxSettings"></jqx-list-box>
</body>
</html>

jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2018. All Rights Reserved.