How to Collapse a Group in a Grid Component
Description
Group breaks are a useful way to organize records in a Grid Component. You can add special directives that enable a user to expand or collapse records in a group in a Grid component.
Discussion
Commands can be added to your Group Break definition to add a collapse/expand feature to a Group in a Grid Component. The collapse/expand feature will show or hide all records in the Group when the Group Header or an icon is clicked. There are several commands available that can be used to define the collapse/expand Group behavior.
- Command
- Description
- {group.toggleVisibilityOnClick}
Causes all rows in the Group to be shown or hidden when the user clicks on the Group Header. The command adds an 'onclick' attribute into the element in which it is placed. This placeholder should be inserted into the <tr> or <td> tag.
- {group.toggleVisibilityOnDblClick}
Causes all rows in the Group to be shown or hidden when the user double clicks on the Group Header. The command adds an 'ondblclick' attribute into the element in which it is placed. This placeholder should be inserted into the <tr> or <td> tag.
- {group.toggleVisibilityIcons}
Displays an icon indicating if the rows in the Group are shown or hidden. The icons defined for the row expander in the style, or in the override settings, are used.
- {group.toggleVisibilityIcons:closeIcon:openIcon}
Displays icons indicating if the rows in the Group are shown or hidden. If the rows in the Group are show, closeIcon will be shown. If the rows in the Group are hidden, openIcon will be shown. Replace closeIcon and openIcon with the name of the icons that should be used.
For example, the code below defines a Group Header that toggles visibility on click. The icons for the row expander will be used to indicate if rows in the Group are shown or hidden.
<tr style="cursor:pointer;">
<td {group.toggleVisibilityOnClick} class="[class.gridDataHeader]" colspan="100" >
{group.toggleVisibilityIcons} State : {group.breakfield}
</td>
</tr>For full details, watch the video below.