Dynamic Grouping in Blazor Grid
IntegralUI Grid component allows you to organize data in hierarchical structures using dynamic grouping. You can add/remove groups on demand based on columns and display grid data in organized way which makes it easier to get a summary value based on currently active groups.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, the Grid data is arranged dynamically by different groups. Initially, there are two groups active, the "Year" and "Country" group. But you can change the groups from grouping panel by clicking on "Add Group" (+ icon) or removing active groups by clicking on delete button (x).
Depending on active groups in grouping panel, the Grid will arrange the data accordingly. The group header will display a summary value depending on chosen aggregation formula. When group is collapsed, the summary data will appear within the group header under corresponding column.
Each group can also show a summary at bottom row at the end of each group, based on selected aggregation function. You can customize the appearance of summary field within row template, in this example it is shown on blue background and white color with slightly increased font size.
How to Group Data in Blazor Grid
By default, grouping is disabled. At first you need to enable grouping in Blazor Grid component by setting the Grouping property. This property accepts an object with following options:
- Enabled - determines whether grouping is active or not
- ExpandBox - determines whether expand box is shown for all groups in grouping panel
- Panel - determines whether grouping panel is visible or not
- ShowColumns - determines whether columns will remain visible or not for active groups
- Sorting - determines whether groups are sortable from grouping panel
- Summary - determines whether summary row will appear for all groups
With grouping enabled, you can set up some groups initially in code, or create a group by adding it in grouping panel. You can create group chain based on columns present in the Grid. To disable grouping for specific column, set the AllowGrouping property to false.
How to Set Groups Initially
To organize grid data in groups initially, you need to add an IntegralUIDataGroup object to the DataGroups property . Each group must have the Field property set to the data field name by which grid data will be organized. Other properties are optional, by which you can override general group settings that are set previously in the Grouping property. For example:
Although all groups have a summary row to appear based on general settings in Grouping property (see above), this option for the second group is disabled.
The order of currently active groups is important. Based on this order, the displayed data will change accordingly in the Grid component. Each subsequent group will create another level of data in the hierarchy.
Add Groups
You can add additional groups from within the grouping panel. By clicking on the (+ icon), you can choose another group to appear in the chain. The list of available groups is determined from present columns, and only if specified column allows grouping.
Whenever a new group is added to the group chain, the GroupAdded event will fire. You can handle this event in your code and add custom actions.
Remove Groups
In similar way, to remove an active group from the group chain, click on delete button (x) present within the group space.
Whenever a group is removed from the group chain, the GroupRemoved event will fire. You can handle this event in your code and add custom actions.
Group Sorting
From Grouping settings, you can set whether groups are sortable or not. By setting the ShowSorting property to true/false or for specific group setting the Sorting property to true/false. If sorting is enabled, the sort button will appear next to the name of active group. Using this button, you can sort all groups that are on the same level in the hierarchy, in ascending or descending order based on the group value.
Whenever the group sort button is clicked, the GroupSortClick event will fire. You can handle this event in your code and set conditions that will cancel the sorting based on provided data: the IntegralUIDataGroup object and the sort order.
Group sorting will arrange groups accordingly based on the sort order, but not the rows present in each group. Sorting of group data is based on sort order of currently sorting column.
Expand/Collapse a Group
From Grouping settings you can also set whether expand box will appear or not in groups. If ShowExpandBox is set to true for all groups, or ExpandBox property to true for specific group, the expand box button will appear before the group name. Using this button, you can expand/collapse all groups that are on the same level in the hierarchy.
Group Summary
At last, setting the ShowSummary for all groups, or Summary property for specific group to true, will add a row at the group end, after all other rows present in the group. This row shows summaries in each column based on chosen or custom aggregation formula.
You can choose the aggregation formula by which summaries are calculated for each column separately. These aggregation functions are built-in:
- AVG - calculates the average value of all group data
- COUNT- calculates the number of values of all group data
- MAX -returns the maximum value from all group data
- MIN - returns the minimum value from all group data
- SUM - calculates the sum of values of all group data
Furthermore, you can create your own custom aggregation formula, by providing an action method to the Aggregate property that is part of the Aggregation for each column.
When group is collapsed, the summary row is hidden, but summary data will appear in group header under each column.
Group Events in Blazor Grid
Whenever there is a change in the group chain, by adding or removing groups, the following events can fire:
- GroupAdded - occurs when new group is set active in group chain
- GroupRemoved - occurs when active group is removed from the group chain
- GroupChanged - occurs when there is a change in the order of group chain
- GroupSortClick - occurs when group sort button is clicked
By handling these events in your code, you can add additional custom actions related to currently active groups based on which the Grid data is arranged.
Here is an example of GroupAdded event where whenever group "Year" is active, the summary row will appear when group expands:
Conclusion
Dynamic grouping allows you to organize Grid data in tree hierarchy and makes it easier to get a summary value based on currently active groups in the group chain. You can group data by adding or removing groups on demand, which will change the data that is currently displayed in the Blazor Grid component. Based on current group chain consisting on active groups, the Grid will arrange the data accordingly and summaries will change depending on chosen aggregation formula.
IntegralUI for Blazor is a library of native Blazor components that includes the Grid Component. You can use it to develop web apps in Blazor .NET framework.