This is a migrated thread and some comments may be shown as answers.

call custom component when grouping

3 Answers 77 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dheeraj Verma
Top achievements
Rank 1
Dheeraj Verma asked on 06 Oct 2020, 07:38 AM

Hello Team,

I am working on a task in which we need to group our data according to the column, also we need aggregate count of record which comes under group.

so the problem is that we have around 1 lakh record in database so, for exact count of record we need to send all record to client.

so, loading time is very slow here or browser is going to be hang.

can we call custom component under group as a child in kendo grid  so that we can do paging if there is 1000 record under one group.

 

Please help.

 

Thanks

Ritesh

3 Answers, 1 is accepted

Sort by
0
Accepted
Svet
Telerik team
answered on 06 Oct 2020, 08:31 AM

Hi Ritesh,

Thank you for the provided screenshot.

Indeed, there isn't a functionality that would allow to render the group items with paging. The current layout of the Grid doesn't provide an option that would allow to change the Group layout to such extent. However, I can suggest two options for this case. One is to use the kendoGridGroupBinding directive as demonstrated in the following article of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-using-virtualization-with-grouping

It requires that the complete data set is provided to the Grid and ensures that just a portion of the complete data set is loaded at once in the Grid, which ensures the smooth scrolling. However, some browser resource would still be required in order to compute the aggregates on the client. 

The second option would be applicable if only one level grouping is required. In such case the master/detail Grid feature can be used as an alternative:

https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/

It allows to load the detail data for each master row only when the master row is expanded. The detail row template can then be configured to use another Grid or any other component. The details Grid can be configured to use paging.

I hope the provided suggestions help.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dheeraj Verma
Top achievements
Rank 1
answered on 09 Oct 2020, 06:35 AM

Thanks Svetlin.

1st option is good for my scenario but i want that when we group with any column then group should be collapsed.

So, How can we do that. I have refer one example but did not worked with virtualization.

https://stackblitz.com/edit/angular-tpetae?file=app/app.component.ts

Can you suggest me the  right way to do this.

 

Thanks

Ritesh

0
Svet
Telerik team
answered on 12 Oct 2020, 03:24 PM

Hi Ritesh,

Thank you for the provided additional details and the demonstrated example.

However, I am afraid that the requirement of having the groups collapsed when using the kendoGridGroupBinding directive isn't supported. The limitation is caused due to the collapseGroup() and expandGroup() methods not working with the directive as described in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-using-virtualization-with-grouping

I understand that the missing functionality may be disappointing, but currently there isn't a supported feature or workaround based on the public Grid API that I can suggest to achieve the requirement.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Dheeraj Verma
Top achievements
Rank 1
Answers by
Svet
Telerik team
Dheeraj Verma
Top achievements
Rank 1
Share this question
or