When I scroll down to the last entries of the grid and open the detail template, I'm not able to see the whole content of the detail row, because the grid doesn't expand.
If necessary i can also add example code.
I'm using kendoui.complete.2012.1.420.commercial build as source. But this problem appears in all versions I have used so far.
regards, Christopher
16 Answers, 1 is accepted
Virtual scrolling is not working well in combination with detail grids. This is a known behaviour and has already been addressed to the developer team. We will consider the support of this scenario in our future releases.
Greetings,
Alexander Valchev
the Telerik team
Rank 1
Rank 1
Rank 1
Is there any further update on this issue? We're having a similar problem using those accordion style row templates with virtual scrolling.
Thanks.
I am afraid that the problem is still not fixed. Currently we cannot offer a solution that works well and does not break other parts of the framework logic. The problem comes from the fact that the virtual scroller is not aware of the height of the detail template which is the main obstacle for us to solve the issue.
Please accept my apology for the inconvenience caused.
As a workaround you may try to:
- reset the virtual scroller at detailCollapse / detailExpand events. As an example:
detailExpand:function() {this.virtualScrollable.refresh();},
- reset the _rowHeight of the Grid
grid._rowHeight = 0;
Please note that there are many cases in which the workaround will not work. Resetting the scroller may force read of the DataSource, which will rebind the grid and collapse the detail row.
Alexander Valchev
the Telerik team
Rank 1
This happens because expanding and collapsing rows changes the Grid's content height, preventing the Grid from calculating the content's height and virtual scrolling from behaving as expected. Also, when scrolling up or down, the rows that are no longer visible are destroyed. When the user scrolls back to them the Grid is not aware whether they should be expanded, so it always renders them collapsed. I am afraid that virtual scrolling is currently not supported when using detail templates (hierarchy) and there is no good solution or workaround that we can suggest.
Regards,
Alexander Popov
Telerik
Rank 1
As I mentioned in my previous reply there is no built-in support for this behavior. I would recommend submitting this as a feature request on our feedback portal, where it could be publicly discussed and voted for.
Regards,
Alexander Popov
Telerik
Rank 1
does this issue solved. I am getting this issue again for last few rows, and when try to scroll down to bottom, cursor jumps back to upside in the middle or top.
We i gave large height to .k-grid-content from developer console, it gets enough space and works well. But when scrolled (virtual) , it again starts behaving the same.
Please let me know how to fix it..
Regards,
Vikas Nale
The issue still exists, the technical reasons are explained in the replies below. I am afraid that at present we cannot offer a suitable solution for using Virtual Scrolling with detail templates feature.
I would recommend submitting this as a feature request on our feedback portal, where it could be publicly discussed and voted for.
Regards,
Alexander Valchev
Telerik
Rank 1
Hi,
Is there any update on this issue?
Regards,
Surya
Using detail templates with Virtual Scrolling is still not supported and the only option for displaying huge amount of records with detail templates is the paging functionality.
Best Regards,
Konstantin Dikov
Telerik
Rank 1
i have the same situation where the last detail template does not display (and also using virtual scrolling)
I also have the grid in a kendo splitter, on the second pane. in the hack i change the size of the first pane and voila, the detail template is displayed:
// looking at the suggested work-arounds in https://www.telerik.com/forums/hidden-detail-row-when-using-detail-template-and-virtual-scrolling
// nothing good
// this.virtualScrollable.refresh(); /// does not work, adversely affects display
// $("#documentGrid")._rowHeight = 0; // this seems to have no effect
// let's try a crazy hack -- change the pane size by 1 pixel and the div seems to know it needs to refresh properly
var splitter = $("#splitter").data("kendoSplitter");
var pane = splitter.element.find(".k-pane:first")
var paneWidth = pane.width() + togglePane + 'px'
splitter.size(".k-pane:first", paneWidth);
togglePane *= -1
Rank 1
Hello Nag,
Thank you for sharing your thoughts and solution with the community!
Just a quick note, the approach/solution might not be applicable to the Kendo UI Grid for jQuery as it is completely different from the RadGridView for WPF.
Anyways, sharing your knowledge is still helpful as someone might get the main idea of your solution and customize their Grid to follow it.
Regards,
Peter Milchev
Progress Telerik