Populating multiple sub-grids with one datasource

2 posts, 0 answers
  1. Bryan
    Bryan avatar
    1 posts
    Member since:
    Feb 2017

    Posted 04 Oct 2017 Link to this post

    Hi,

    I am using a grid that initially only pulls the most commonly used data fields for each record in the grid (what I call level 1).  Optionally, the user can expand a given row, in which case additional details are displayed in a nested grid, which I call level2.  This works fine when a single row is expanded. 

    I have a method for the user to expand all of the rows currently displayed in the level1 grid.  When this occurs, a call is made to the server for each row that is being expanded in order to pull the additional details for the level2 grid for each row.  This is a very slow operation when I am displaying a large number of rows in the level1 grid (for example, 100 rows).

    I am wondering if it is possible to query the data for all of the rows to be expanded in a single call to the server and then use the resulting data set to populate all of the level2 grids without having to make n round trips to the server for one record at a time. Querying and returning the data for all rows is not a problem.  But since each level2 grid is a separate object, I am not sure how to point them all to the appropriate data on the client side, or if it is even possible.

    Or is there a better approach to populating multiple level2 grids that would perform well?

    Thanks!

  2. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 06 Oct 2017 Link to this post

    Hello, Bryan,

    In this scenario, the slow performance is most probably caused by rendering 100 Grid almost at the same time and event optimizing the request will still be significantly slower.

    The described result is expected because by expanding all parent rows this is initializing another 100 Grids on the page which is very resource consuming operation and it will mainly depend on the browser and the machine.

    In this scenario, we can suggest to either reduce the page size of the main Grid to a number where the performance is acceptable or to expand the first couple of child Grids:

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-pageSize

    Another option will be to implement our new Endless scrolling feature, but please check all of its specifics as some of them may not be acceptable:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#endless-scrolling

    I do understand that this may not be the perfect solution, but rendering 100 Grids simultaneously on the page is a very heavy task for almost all of the standard computers.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top