How to change Kendo UI grid page index programmatically?

Question

I have a kendo ui grid. Let's say that the JS variable pointing to the grid is called grid. How can I go to page 3 programmatically? Thanks.

Informative

Answer 1

You might to use:

grid.dataSource.query({ page: 3, pageSize: 20 });

Documentation in here.

or:

grid.dataSource.page(3);

Documentation in here

Truncated

grid.pager.page(3) did the trick too, but your answer is correct, thanks for the input, I accept your answer and upvote it too. Merry Christmas and a Happy New Year. – Informative

how to do it with asp mvc helper? – Amr

By this moment - no chance ( – Scyphus

Only the 1st suggestion works upon initial page load. If the grid has already been loaded I've had success with the second suggestion but not upon initial page load. – Vivid

@anyeone, You are right! The question is that page does not read data while query does. – Truncated

I found that this solution throws out the sort on the new page if you had one applied. I had to resend the sort parameter also: grid.dataSource.query({ page: 3, pageSize: 20, sort: grid.dataSource.sort() }); – Jung

Answer 2

Answer is just set it pate: 1 when datasource created

var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  page: 1,
  // a page of data contains two data items
  pageSize: 2
});

Growth

Wow! This is so much better than the other answer. Because on initial load it results in one request while the other answer does two requests and flickering. – Yellowhammer

Agreed. I used like so: { page: sessionStorage.getItem('page'), }. Setting the page based on the user's session information. It would also be cool to have the grid changed based on queryStrings and such. I would like to emphasize, I have no flicker like @Yellowhammer says. – Buster

If you make page change after grid has been already loaded like another answer suggests then grid needs to be redrawn. That is flickering. Though it may not not appear depending on your setup. E. g. if you show grid only after the page change. – Yellowhammer

The question was ambiguous, this answer is for setting the initial page, however the answer from @Truncated is for setting the page dynamically. Although both answers are correct, this answer does not work in all scenarios. – Paramilitary