I would like to open a grid like this (without manually dragging the header):
In other words, using this example, I would like to group by Name whenever the grid loads.
II have the grid configured like this in the html file:
[(expandedGroupKeys)] = "groups"
And I have tried this in the component.ts file:
groupBy(this.groups, this.groups);But I think the GroupBy works on the data query and not on the grid.
Is there a way to do what I am trying to accomplish?
Thanks for any help or pointers.
1 Answer, 1 is accepted
Hello Bill,
Indeed, you are on the right track regarding the usage of the groupBy() method to achieve grouping of the Grid data on its initialization. This method accepts as its parameters the data to be grouped and a GroupDescriptor array that contains the desired fields, by which the grouping should be performed.
With that being said, since I noticed from the shared code in the ticket that 'this.groups' is passed for both parameters of the groupBy() method, the configuration of the method should rather look similar to the following:
public groups: GroupDescriptor[] = [
{ field: 'Name' }
];
groupBy(yourData, this.groups);
You can find more detailed information and a runnable example in our Manual Grouping demo linked below, which demonstrates the manual setup approach of the grouping feature that achieves an identical scenario to the desired one:
Alternatively, this scenario can also be implemented by using the built-in DataBindingDirective of the Grid, which automatically performs the grouping for you. This case only requires setting a GroupDescriptor object with the desired fields to the group property of the component. For a better understanding, I am also sharing a StackBlitz example illustrating the described approach:
I hope that the provided information is helpful. I remain at your disposal in case any further questions arise.
Regards,
Zornitsa
Progress Telerik
Rank 1
THANK YOU!!!
I added the [group]="groups" and it is working just like I wanted it to.
You made me look good!
Bill