call custom component when grouping

4 posts, 1 answers
  1. Dheeraj Verma
    Dheeraj Verma avatar
    2 posts
    Member since:
    Jun 2010

    Posted 06 Oct Link to this post

    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

  2. Answer
    Svetlin
    Admin
    Svetlin avatar
    448 posts

    Posted 06 Oct Link to this post

    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/.

  3. Dheeraj Verma
    Dheeraj Verma avatar
    2 posts
    Member since:
    Jun 2010

    Posted 09 Oct in reply to Svetlin Link to this post

    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

  4. Svetlin
    Admin
    Svetlin avatar
    448 posts

    Posted 12 Oct Link to this post

    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/.

Back to Top