Can you programmatically group a kendo-grid on load?

1 Answer 242 Views
Grid
Bill
Top achievements
Rank 1
Bill asked on 11 Jan 2024, 03:30 AM

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:

    kendoGridExpandGroupBy = "groups"
    [(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

Sort by
0
Zornitsa
Telerik team
answered on 11 Jan 2024, 01:51 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Bill
Top achievements
Rank 1
commented on 11 Jan 2024, 03:13 PM

THANK YOU!!!

I added the [group]="groups" and it is working just like I wanted it to.

You made me look good!

Bill

Tags
Grid
Asked by
Bill
Top achievements
Rank 1
Answers by
Zornitsa
Telerik team
Share this question
or