DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Select Box - Grouped Items

Data items in the SelectBox's drop-down list can be organized in groups.

If the data source contains ungrouped data items, use the DataSource's group property to specify the data field to group by. This case is illustrated in this demo's first and third SelectBoxes.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

The SelectBox can also work with initially grouped data items. In this case, the data array should contain objects with the key and items fields:

If data objects are grouped but use other field names, implement the DataSource's map function to create key and items field mappings as in this demo's second SelectBox.

NOTE

Only one-level grouping is supported.

Regardless of the data source structure, enable the grouped property.

If the data source contains objects, specify the following SelectBox properties:

  • valueExpr
    A data field that contains unique values used to identify items.

  • displayExpr
    A data field whose values should be displayed in the drop-down list.

If you need to specify a custom template for group captions, use the groupTemplate property. In this demo, each caption contains an icon and a text string.