Grouping in ListBox
When you have a long list of items, it may become hard to find a specific item. One way to solve this is to use create list groups. The IntegralUI ListBox component supports grouping that allows you to create groups on demand and divide items in multiple categories.
A sample code that shows how to create list groups in ListBox is available in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, there are few groups available to choose from. By selecting a group, the ListBox will show all items in different categories based on their value. In addition, you can sort items and groups in Ascending or Descending order.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Create List Groups in ListBox
In order to create list groups, at first you need to create an array of group objects that will contain information about the group. The group object can have any custom fields, but most important ones are just two fields:
- name - specifies the group name
- expanded - (optional) determines whether the group is expanded or collapsed, on initialization
Other than above fields, you can add any number of custom fields that will provide additional information about the group. This is useful, when you use custom item templates where you can customize the appearance of the group header.
The ListBox component by default will not display items in list groups. There are two properties that need to be set first:
- groups - holds a reference to the array with group objects
- showGroups - determines whether items are grouped or not, by default is false
In order to show items in list groups, both properties needs to be set, groups property to point to the array of group objects and showGroups to be set to true.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Each item has a group field, which accepts a string value that matches the name field value of the group object. In this way, all items with matching group name are placed in the same group list.
You can also group items dynamically by specifying the groupBy property to an item field. It can be any custom field set in item object, based on its value items will be grouped dynamically.
You can pre-create groups for selecting, based on specified field in items. For this example, 3 different groups are created: Genre, Year and Rating. You can cycle through the list and create these groups from items:
In this example, groups are created dynamically, whenever a group selected from the dropdown, a different set of list groups is shown in the ListBox. To create list groups on demand, you need to cycle through the item list and depending on their value in specified field (genre, year or rating), update the group field accordingly.
Once the array of group objects is created, you only need to apply it to the groups property of the ListBox component and update its layout.
As a result, items are arranged in different sets of list groups that will appear in the ListBox.
Conclusion
Grouping is a very useful feature of the ListBox component. With large lists it helps to separate items in multiple categories, on demand. In addition, each of these list groups is expandable, and you can set whether they appear expanded or collapsed during initialization. There is also an option to customize the group header within the item template, by using HTML custom elements and CSS.
ListBox is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.