Kendo ui grid pagable size changing after refresh the grid

Question

I have kendo grid with custom search form . In my search form i have submit and reset button . If something search then the grid will update with searched filter datasource, and click reset the grid will get refresh with new datasource. My problem is without reset If i change the pagesize value 10 to 20 and i click reset the grid ..then the grid pagesize change into 20 to 10 ...If i click next page then the pagesize remain 20 for second page, 10 for first page

How do i resolve this ? Any idea ? My code for pageable:

           pageable: {
                pageSizes: [10,20, 30, 50],
                buttonCount: 5,
                messages: { 
                    itemsPerPage: "Items per page",
                    first: "First",
                    previous: "Prev",
                    next: "Next",
                    last: "Last",
                }
            }, 

Answer 1

My understanding is that now you are changing the Kendo UI DataSource instance to which the Grid is bound. If this is the case, then you have two options:

• instead of changing the dataSource instance, only change the data in the current dataSource instance by using its data() method. You may also need to clear the filter programmatically.
• if you prefer to change the DataSource instance, then obtain the page size from the old instance and set it to be the same in the settings of the new DataSource instance.

Answer 2

As dimodi stated

You may need to clear the filter and set your pageSize

Example:

var grid = $("#GridName").data("kendoGrid");

grid.clearSelection();

var pagesize = grid.dataSource.pageSize();
grid.dataSource.query({
    sort: { field: sortField, dir: sortDescOrAsc },
    page: 1,
    filter: {},
    pageSize: pagesize
});