CODEWITHSUNDEEP
kendo-uikendo-grid
Matteo Piazza
Matteo Piazza

Reputation: 2502

KendoUI: resetting grid data to first page after button click

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.

Upvotes: 15

Views: 33662

Answers (5)

Mathew Leger
Mathew Leger

Reputation: 1633

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

Upvotes: 4

Daniel Lorenz
Daniel Lorenz

Reputation: 4336

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

Upvotes: 21

Petur Subev
Petur Subev

Reputation: 20193

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

Upvotes: 5

Vojtiik
Vojtiik

Reputation: 2560

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

Upvotes: 0

OnaBai
OnaBai

Reputation: 40887

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.

Upvotes: 24

Related Questions