33

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.

ManirajSS
  • 2,295
  • 5
  • 26
  • 50
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175

2 Answers2

77

You might to use:

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

Documentation in here.

or:

grid.dataSource.page(3);

Documentation in here

Vinney Kelly
  • 4,975
  • 1
  • 25
  • 31
OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • 3
    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. – Lajos Arpad Dec 20 '12 at 21:38
  • how to do it with asp mvc helper? – Roar Sep 12 '13 at 07:53
  • By this moment - no chance ( – EvgeniyK Oct 09 '13 at 09:26
  • 1
    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. – anyeone Mar 05 '14 at 15:56
  • @anyeone, You are right! The question is that `page` does not read data while `query` does. – OnaBai Mar 05 '14 at 18:13
  • 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() }); – NPearson Apr 01 '21 at 18:48
10
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
});
Muhammad Bilal
  • 359
  • 3
  • 5
  • 4
    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. – alehro Jul 28 '16 at 14:26
  • 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 @alehro says. – christo8989 Nov 01 '16 at 21:26
  • 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. – alehro Nov 02 '16 at 04:07
  • The question was ambiguous, this answer is for setting the *initial* page, however the answer from @OnaBai is for setting the page *dynamically*. Although both answers are correct, this answer does not work in all scenarios. – pathurs Jan 02 '18 at 04:54