A group is an element that collects several tiles in it. In terms of data, it is a node that has children in the current context. Groups appear only if the data source implies a hierarchical structure.
The following list provides an overview of group features that you can configure using the group object.
Each group is identified by a label. Its appearance can be changed using the fields of the label object. If the group's width is too small, the label will be hidden.
- Headers' Height
Group headers contain labels. To specify the height of the group headers, use the headerHeight option.
There are several approaches to colorizing the group headers. Refer to the color option description to find information about all of them.
- Hover and Selection Styles
A group can be in the hover or selected state. In these states, its style changes to the one specified by the hoverStyle or selectionStyle object respectively. A group can also enter the hover or selected state when a nested tile enters it. To enable this feature, assign true to the interactWithGroup option of the root configuration object.
- Border's Appearance
Specify the fields of the border object to configure group borders.
An object assigned to the group field configures all groups in the widget. To customize a specific group, pass a similar object to the customize(options) method of the node represented by the group.
Colors the group headers.
This option supports the following colors.
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
Specifies the height of the group headers in pixels.
Specifies whether groups change their style when a user pauses on them.
By default, this option inherits the value of the hoverEnabled option declared at the root level of the configuration object. Specify the group.hoverEanbled option only when you want to disable the hover state for groups, but not for tiles. In this case, set this option to false.
Specifies the appearance of groups in the hover state.
When the user pauses on a group, this element responds by changing its style. Using the fields of the hoverStyle object, you can specify the color of group headers and appearance of group borders in the hover state.
- hoverEnabled - enables/disables the hover feature.
Configures the group labels.
Each tile or the header of a group contains a text label identifying what this tile or group represents. You can change the font of group labels or their visibility using the fields of the group.label object. The same properties of tile labels can be changed using the tile.label object.
To customize a specific label, use the customize(options) method of the node to which the label belongs.
- labelField - specifies the data source field that provides texts for tile and group labels.
Specifies the appearance of groups in the selected state.
When the user selects a group, this element responds by changing its style. Using the fields of the selectionStyle object, you can specify the color of group headers and appearance of group borders in the selected state.
To learn how to implement the selection feature and get familiar with available selection modes, refer to the selectionMode option description.