Grouping ListBox Items

Each jqxListBox item has a property called ‘group’. When this property is set in the ListBox’s initialization, the list items will be grouped depending on the ‘group’ value and a group header will be displayed above each group of list items. The sample code below creates a jqxListBox instance. You can note that we set the ‘group’ property of all objects in the source array.
var source = [{
label: "Peppermint Hot Chocolate",
value: "Chocolate Beverage",
group: "Hot Chocolate"
}, {
label: "Salted Caramel Hot Chocolate",
value: "Chocolate Beverage",
group: "Hot Chocolate"
}, {
label: "White Hot Chocolate",
value: "Chocolate Beverage",
group: "Hot Chocolate"
}, {
label: "Caffe Americano",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caffe Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caffe Mocha",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Cappuccino",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caramel Brulee Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caramel Macchiato",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Peppermint Hot Chocolate",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Cinnamon Dolce Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Eggnog Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Espresso",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Espresso Con Panna",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Espresso Macchiato",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Flavored Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Gingerbread Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "White Chocolate Mocha",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Skinny Peppermint Mocha",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Skinny Flavored Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Pumpkin Spice Latte",
value: "Espresso Beverage",
group: "Espresso"
}, {
label: "Caffe Vanilla Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Caffe Vanilla Frappuccino Light",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Caramel Brulee Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Caramel Brulee Frappuccino Light",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Eggnog Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Mocha Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}, {
label: "Tazo Green Tea Creme Frappuccino",
value: "Frappuccino Blended Beverage",
group: "Frappuccino"
}]
// Create a jqxListBox
$("#jqxWidget").jqxListBox({ source: source, width: 300, height: 300, theme: 'darkblue' });
The result of the above code is: jquery-listbox-groups

About admin


This entry was posted in jQuery Plugins, jQWidgets, jqxListBox and tagged , , , , , , , , , , , , , . Bookmark the permalink.



One Response to Grouping ListBox Items

  1. Andrew says:

    It is nice, but how can I if my source dataType is “json” ? can you post an example?

Leave a Reply