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

"Paging" with Grid Remote Data Virtualization

3 Answers 79 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 24 Jul 2014, 04:54 AM
I'm using the grid and have it configured to use the virtualization of remote data.
http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

What I would like is to have some indication in the footer of the grid that shows what range of the data is being viewed in the visible area in the grid - sort of like traditional paging.  Something like "Showing 20-30 of 500".

Is this possible with the virtualization of remote data configuration?

Thanks,
--Ed

3 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 25 Jul 2014, 03:10 PM
Hello Ed,

Please try to include the Grid's pager but disable its buttons. In that way you will see only the info panel that contains information about current page and total amount of records.
For your convenience I prepared a small example: http://dojo.telerik.com/ICUr

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
Cristal
Top achievements
Rank 1
answered on 12 Nov 2018, 08:50 PM

Hi,

I know it a old question, but I'm trying to use the same technique to have the number of elements shown in the bottom of the grid, but there a little bug when the grid doesn't contain enough items. I took the demo that Alexander creates, and change the Pagesize to 19. So when I scroll slowly, I go from item 1-19 to 20-38, back to 1-19.
I use the version 2018 R3 SP1
http://dojo.telerik.com/UpAWIFak

thanks
LJ

0
Konstantin Dikov
Telerik team
answered on 14 Nov 2018, 02:31 PM
Hello Louis,

The page size should be at least three times larger than the number of visible rows in the Grid, as documented in the Limitations section of the Virtual Scrolling article: 
Another thing that is mandatory is to unify the height of the rows, because the virtual scrolling requires equal height for each row:
.k-virtual-scrollable-wrap tr
{
    height: 3em;
}
 
/* or */
 
.k-virtual-scrollable-wrap td
{
    white-space: nowrap;
}

Hope this helps.


Regards,
Konstantin Dikov
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
Ed
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Cristal
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or