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

Set grid with virtual scrolling enabled to specific page

5 Answers 243 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dirk
Top achievements
Rank 1
Dirk asked on 11 Dec 2014, 01:51 PM
Hi,

is there a way to set a grid with virtual scrolling enabled to a specific page with vertical scrollbar properly working?

I'd like the grid to show all rows that are part of page 15 for instance.

I achieved that by using the following code snippet:
 var pageToLoad = 15;
                       
var grid = $('grid').data("kendoGrid");
            var dataSource = grid.dataSource;
            dataSource.page(pageToLoad);
                dataSource.query({
                    page: pageToLoad,
                    group: dataSource.group(),
                    filter: dataSource.filter(),
                    sort: dataSource.sort(),
                    pageSize: dataSource.pageSize()
                });

But after loading the correct data the scrollbar is positioned at top (does not reflect position ratio compared to total) and if I now use the scrollbar to go to the next page (16) page 1 is shown after loading data.


Best regards
Dirk

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Dec 2014, 12:17 PM
Hello Dirk,

The discussed behavior is unfortunately not supported. Theoretically, you can move to a specific page by scrolling the virtual scrollbar programmatically, but there is no guarantee that the displayed data will correspond to the beginning of the desired page.

1. Go to http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

2. Execute the following code in the Javascript console.

var grid = $("#grid").data("kendoGrid");
var newPageNumber = 4;
var rowHeight = grid.tbody.children().eq(0).height();
var pageSize = grid.dataSource.pageSize();
 
grid.wrapper.find(".k-scrollbar").scrollTop(rowHeight * pageSize * (newPageNumber - 1));


===

On a side note, it makes no sense to execute

dataSource.page( /*newPage*/ );

and

dataSource.query( { /* sorting, paging, filtering, grouping settings*/ } );

at the same time, because they will do exactly the same thing. The page() method loads a given page, while preserving all other dataSource settings.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bridge24
Top achievements
Rank 1
answered on 09 Jul 2015, 03:31 PM

Hi, I have a similar problem. I want to go directly to a specific page of my grid using

$("#grid").data("kendoGrid").dataSource.page(3)

It works, but pages 1 and 2 have disappeared! Why?

See example here: http://dojo.telerik.com/AVIcu

 

 

 

 

 

 

0
Dimo
Telerik team
answered on 10 Jul 2015, 11:55 AM
Hi Daniel,

As mentioned in my previous message, this approach is not supported. Try scrolling the virtual scrollbar, as I have demonstrated above.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bridge24
Top achievements
Rank 1
answered on 10 Jul 2015, 01:56 PM

Hi Dimo, just 1 note about your comment:

"On a side note, it makes no sense to execute
dataSource.page( /*newPage*/ );"

 We really think that it "makes sense" in our scenario, so let me explain it, and maybe you should suggest us a different solution to our problem?

Case: the "grid" is loaded with 1000 lignes of data (in-memory), sorted alphabetically, with virtual scrolling enable, pagesize: 50, we are on page 2, so we see elements 50-99.

We click a row, and we display a "edit" form of that row, from the original data provided by the grid, using the "observable" features.

After the edit, the "sort" makes that the data from page 2 moves to page 5.  We want to "move" the grid to the correct page, and we select-highlight the last edited item.  

That's why we need to change current page to X, by using grid.dataSource.page(x).  

Then, we select the good row.

Is it the good approach?

Thank you

0
Dimo
Telerik team
answered on 13 Jul 2015, 07:11 AM
Hi Dani,

My comment was that "it makes no sense to execute the page() method and the query() method at the same time".

While it does make sense to change the virtual scrollbar position of the Grid programmatically, this is unfortunately not supported. You can try the approach suggested in my first reply, but there is no guarantee that it will work precisely in all scenarios.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Dirk
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Bridge24
Top achievements
Rank 1
Share this question
or