This stackblitz should show what I mean: https://stackblitz.com/edit/grid-and-detailtemplate?file=app/app.component.ts
There are two things going on, which will be easier to see if you watch the JavaScript debug console.
1. When scrolling down, page loads cause a jump in the view. Like when I scroll down to #18 and a page load occurs, the viewport will jump to row #25 or so. This happens scrolling both up and down
2. When I expand any of the detail templates, the page loading mechanism gets really wonky and only jumps between the first set of results and the last set, with a lot of whitespace at the end.
I'm sure I haven't hooked up something correctly, but I'm not sure what. Thanks!
7 Answers, 1 is accepted
Rank 1
[detailRowHeight]="36"
Indeed, when using the Grid virtual scrolling and master-detail features together, the following requirements need to be met:
1) All master Grid rows should be of an equal predefined height, and the rowHeight option should be set so that it reflects the actual row TR elements height in the DOM
2) In scenarios, involving master-detail grids, same goes to the detail row height - all detail templates need to be of an equal predefined height that reflects the actual height of the respective DOM elements
https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-getting-started
Here is the updated example with added detailRowHeight and some CSS ensuring that all Grid rows are actually 36px high:
https://stackblitz.com/edit/grid-and-detailtemplate-xedjod?file=app/app.component.ts
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
When using master-detail grids, does the detailRowHeight correspond to the size of the *rows* in the detail grid or the size of the entire detail grid? I'm experimenting with various values and seeing odd scrolling behavior when multiple detail grids are expanded at the same time.
For the following example, if you expand the first five or so detail grids, the view jumps down to row ~40 and you cannot scroll back up to the top unless you do it very quickly. What am I missing?
https://stackblitz.com/edit/angular-masterdetail-virtual?file=app/app.component.ts
The detailRowHeight should reflect the actual height of each detail row in the DOM:
If the detail template contains another Grid, these detail Grids should have the same height and can in turn be scrollable. Then add the detail cell paddings to the Grid height to obtain the actual DOM TR height (or inspect the DOM element in the browser developer tools and check its height):
If the nested Grid (the one within the master Grid's detail template) needs to have virtual scrolling too, then its rowHeight should reflect its (nested Grid's) own row height.
To sum up - rowHeight and detailRowHeight are options applicable to the Grid that utilizes virtual scrolling. All inner grids within the detail template are separate ones that are not connected to the Master Grid configuration whatsoever and will have their own configuration options as necessary.
The rowHeight option needs to reflect the actual height of each regular Master Grid row, while the detailRowHeight needs to reflect the height of the expanded details row. All regular rows' heights should be equal (e.g. 36px) and all detail row heights should be equal (among the detail rows, not to the regular row height), e.g. - 212px:
I hope this makes the rowHeight and detailRowHeight options clearer.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Thanks for the reply - if I'm reading that correctly, then I can't have a virtually scrolling detail grid in my project since I don't have a fixed number of elements that belong to each master grid row. In other words, there could be one or fifty rows in any of the detail grids and there's no way I can think of to make that a fixed size.
Maybe I'm using the vocabulary incorrectly - I have requirements to avoid a paging user interface (this: https://www.telerik.com/kendo-angular-ui/components/grid/paging/) and so I thought virtual scrolling was the way to go. I have an unknown number of master rows and each of those contains an unknown number of detail rows. I can set the rowHeight for both the master and detail grids to 36, since that's known, but I can't set the detailRowHeight on the master grid since the height of the expanded details for the master row can vary by quite a it.
The problem I'm seeing with this project: https://stackblitz.com/edit/angular-masterdetail-virtual is that even with a fixed number of detail rows (and hence a fixed size of the detail grid) scrolling around with expanded detail grids can cause rapid page change callbacks (e.g., skip = 0 then skip = 48 then skip = 29 all within a half second) and that's a bad user experience.
What can you recommend? I can try debouncing the callback but that seems a little hacky.
Rank 1
This may be a better indication of what I'm looking for.
https://stackblitz.com/edit/angular-masterdetail-virtual-maxsize
I've updated the data generator to include a random number (1-10) of entries in each detail grid. I also added the [style.maxHeight.px]="200" annotation to the detail grid and set [detailRowHeight]="216" in the master grid. This works ok, except that it still jumps around a bit if you
1. Expand several of the groups at the top
2. Scroll down until you get a page load
3. Scroll up and as you start to approach the expanded groups at the top, you will jump down like 20 entries at some point
And I'm not sure what to do about that - am I getting close? Maybe I could ensure that there is only one detail grid open at a time and so the pixel counts wouldn't get too far off..?
I'm getting a similar jumpiness if I annotate the detail grid with [style.minHeight.px]="200" which is honestly kind of ugly anyway
Hello Еd,
The most straight-forward approach to ensure that all detail Grids will be of equal height too, is to set the "height" property of the detail template Grid. Then all detail templates will be of an equal height (scrollable when necessary).
Here is an example of a master Grid with virtual scrolling with detail template containing another Grid with virtual scrolling (the nested grid can be with regular scrolling, not necessarily virtual, if it does not contain that many data items):
https://stackblitz.com/edit/angular-jwnnwp?file=app/app.component.ts
I can also recommend installing the latest version of the Grid package that contains a fix for the following issue:
https://github.com/telerik/kendo-angular/issues/2297
Regards,
Dimiter Topalov
Progress Telerik