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

Hidden detail row when using detail template and virtual scrolling

16 Answers 210 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 24 Apr 2012, 08:56 AM
I have a problem when I'm using the grid component in combination with a "detail template" and "virtual scrolling".

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

Sort by
0
Alexander Valchev
Telerik team
answered on 26 Apr 2012, 02:04 PM
Hi Christopher,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chris
Top achievements
Rank 1
answered on 26 Apr 2012, 02:21 PM
Thank you :)
0
Mohamad
Top achievements
Rank 1
answered on 03 Dec 2012, 10:25 AM
This is a bit of a problem for me also. please fix
0
Anthony
Top achievements
Rank 1
answered on 22 Feb 2013, 10:42 AM
Hi,

Is there any further update on this issue? We're having a similar problem using those accordion style row templates with virtual scrolling.

Thanks.
0
Alexander Valchev
Telerik team
answered on 27 Feb 2013, 12:31 PM
Hello guys,

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.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!


0
Gerber
Top achievements
Rank 1
answered on 24 Jun 2014, 12:54 AM
Hi.. any updates on this one?
0
Alexander Popov
Telerik team
answered on 26 Jun 2014, 03:51 PM
Hi Gerber,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
guga
Top achievements
Rank 1
answered on 26 Aug 2014, 02:56 PM
Is there any solution at this issue?
0
Alexander Popov
Telerik team
answered on 29 Aug 2014, 10:48 AM
Hi guga,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Venkat Chalasani
Top achievements
Rank 1
answered on 04 Dec 2015, 12:51 PM

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

 

 

0
Alexander Valchev
Telerik team
answered on 09 Dec 2015, 09:14 AM
Hi Vikas,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Surya
Top achievements
Rank 1
answered on 22 May 2017, 02:07 PM

Hi,

Is there any update on this issue?

 

Regards,

Surya

0
Konstantin Dikov
Telerik team
answered on 25 May 2017, 07:30 AM
Hello 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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mike
Top achievements
Rank 1
answered on 17 Dec 2018, 02:18 PM

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

0
Nag
Top achievements
Rank 1
answered on 28 Jan 2020, 11:00 PM
My MVVM app has a RadGridView with RowDetails template. Here is the problem: On a row, I clicked the + (plus) sign to open the details, then scroll to see the records in detail (again a set of detail rows). Now I click on - (minus) to close the detail. Now, the main RadGridView shows, but only partial set of rows. the number of rows now hiding are the ones pushed up to make room for showing Row Details. I have a property bound to the Pagesize of RadGridView . What I did, incremented and decremented the value of the property which forced the screen refresh. That worked, not sure that is the final solution. Just thought of sharing this. 
0
Peter Milchev
Telerik team
answered on 31 Jan 2020, 01:47 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Chris
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Chris
Top achievements
Rank 1
Mohamad
Top achievements
Rank 1
Anthony
Top achievements
Rank 1
Gerber
Top achievements
Rank 1
Alexander Popov
Telerik team
guga
Top achievements
Rank 1
Venkat Chalasani
Top achievements
Rank 1
Surya
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Mike
Top achievements
Rank 1
Nag
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or