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:
It is nice, but how can I if my source dataType is “json” ? can you post an example?