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.

Answer 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.

Answer 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"} );

Answer 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" } });

Answer 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);
});

Answer 5

Define a parameterMap for your Kendo grid DataSource read operation, this comes into the transport element as shown below. Then call grid.dataSource.page(1), this will call read and you should be sorted.

   new kendo.data.DataSource({      
transport: {
                   read: {
                          // ur read
                          },
           parameterMap: function (o, operation) {
                         var output = null;
                         switch (operation) {
                                    case "create":
                                    break;
                                case "read":
                                    output =  {parameter: "value"};
                                    break;
                                case "update":
                                    break;
                                case "destroy":
                                    break;
                        }
                     return output;             }}});