Blogs

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: