Kendo UI Grid - How to stay on selected grid page

Question

I have Kendo UI MVC grid on page with Ajax binding. User can click on row to see product details on Product detail page.

Problem is that if user move to grid page 3 and go to Product detail page and then click Back button grid refresh and show them first grid page.

Is it posible that after back button is clicked grid stay on page 3?

Answer 1

you can move to page 3 by this way : $('#grid').data().kendoGrid.dataSource.page(3); So, You just save the 'current page' in cookie, or the URL (this one is better). Then you move to page 3 dater kendo-Grid dataBound :) ... I have not tested it yet, But I think It works :)

Answer 2

Actually you have to implement change listener of the grid pager:

$('#grid').kendoGrid({
    ... 
    pageable: {         
        change: function (e){
            location.hash = e.index; // or set the cookie               
        }           
    },
});

And then listen for the location (or cookie ) changes. Example for location:

$(window).on('hashchange', function() {
    var gridPager = $('#grid').data("kendoGrid").pager;   
    var gridPage = gridPager.page(), currentPage = getPageFromBrowserWithSomeDefault();

    //  Update only if necessary since kendo does not do extra comparison
    //  UPD: if server returns no results gridPage would be 0 instead of 1
    if (gridPage > 0 && gridPage != currentPage) {
        gridPager.page(currentPage);
    }     
}); 

The tricky thing is to make the direct navigation possible. Since in the beginning the datasource knows nothing about the number of items, it won't allow requesting page other than the first one. So be sure to do request it:

    $('#grid').kendoGrid({
        ...
        autoBind: true,
    });

once the responce aquired and processed you can just trigger the ' hashchange ' handler to update the grid (for example in ' success ' handler of your ajax call):

    $(window).trigger('hashchange');

Answer 3

You could persist grid state before going to detail page

Before going to detail:

var grid = $("#grid").data("kendoGrid");
localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions()); 

On document load:

$(document).ready(function() {
    var grid = $("#grid").data("kendoGrid");
    var options = localStorage["kendo-grid-options"];
    if (options)
        grid.setOptions(JSON.parse(options));
});

Demo

Answer 4

var selectedPage=1;    
    $('#grid').kendoGrid({

        pageSize: 10,
        page: selectedPage,
        ... 
        pageable: {         
            change: function (e){
                selectedPage = e.index;            
            }           
        },
    });