KendoUI: resetting grid data to first page after button click

Question

I have the following scenario:

in my page I have a grid (with pagination) bounded to a datasource. When I click on the button "Extract" the grid gets populated (reading paginated data through a web service). Then i select "page 2" through grid pagination. Again the web service is invoked to return data.

Now: I would like to click on "Extract" once more, to reload and show data on the first page. I'm not sure which is the best way.

I would like to make just one call to the service (with input parameters) and have pagination index in the grid resetted.

I am now using the following code:

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");
    grid.dataSource.read( {parameter: "value"} );
    grid.dataSource.page(1);
});

but it actually makes two calls to the service.

Solution 1

If you are doing server side paging it should be enough doing grid.dataSource.page(1) since this will invoke the read exactly as you already realized.

Solution 2

For some reason, if the page is set to 1 and you set it to 1 again, it will do a read. If it is something other than 1 and you set it to 1, it will just go to that page and not do a read. So to answer your question, you can use this code:

if (grid.dataSource.page() != 1) {
   grid.dataSource.page(1);
}
grid.dataSource.read( {parameter: "value"} );

Solution 3

To perform only a single request you should use the query method of the dataSource. It allows you to create combination of the different methods like filter/page/sort etc.

For example:

dataSource.query({ page: 5, pageSize: 20, sort: { field: "orderId", dir: "asc" } });

Solution 4

Use the DataSource.query() method to pass the page number and your custom input parameters:

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");
    grid.dataSource.query( { page: 1, parameter: "value"} );
});

If you're using server side paging and sorting then you may need to include that information as well:

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");

    var queryParams = {
        page: 1,
        pageSize: grid.dataSource.pageSize(),
        sort: grid.dataSource.sort(),
        group: grid.dataSource.group(),
        filter: grid.dataSource.filter(),
        parameter: "value"
    };

    grid.dataSource.query(queryParams);
});

View more solutions

Comments

[Matteo Piazza]

Thanks, but if I would like also to send parameters with te request?

[Matteo Piazza]

Does this mean I have to define the input parameters object (I mean '{parameter: "value"}') in an external object, somewhere globally accessible, in the code? I was using "read()" just because I could update input in the parameterMap just sending data into it.

[Dmitry S.]

You can add parameters to the $grid.data("kendoGrid").dataSource.transport.options.read.ur‌​l property by creating the a new data source URL.

[mgmedick]

This answer worked for me and the comment marked as the solution did not.

[MalibuCusser]

Throw the grid.dataSource.read({parameter:"value"}); in an else block to prevent a double hit to your server when the page isn't 1.

[Daniel Lorenz]

No. If it is not page 1 you have to set it to page 1. This will not cause a hit to the server. Only if you set it to 1 when it is on 1 already does it hit the server. If you don't go to page 1 first then you could end up on an empty page.