javascript - Kendo UI Grid - 選択したグリッド ページにとどまる方法

Question

Ajaxバインディングを使用して、ページに剣道UI MVCグリッドがあります。ユーザーは行をクリックして、製品詳細ページで製品の詳細を表示できます。

問題は、ユーザーがグリッド ページ 3 に移動して製品詳細ページに移動し、[戻る] ボタンをクリックしてグリッドを更新し、最初のグリッド ページを表示することです。

戻るボタンをクリックした後、グリッドが 3 ページにとどまる可能性はありますか?

Answer 1

この方法で3ページに移動できます：$（'＃grid'）。data（）。kendoGrid.dataSource.page（3）; したがって、「現在のページ」をCookieまたはURLに保存するだけです（これが優れています）。次に、3ページに移動します。daterkendo-Grid dataBound :) ...まだテストしていませんが、機能すると思います:)

Answer 2

詳細ページに移動する前にグリッドの状態を保持できます

詳細に入る前に：

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

ドキュメントのロード時:

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

デモ

Answer 3

実際には、グリッド ページャーの変更リスナーを実装する必要があります。

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

次に、場所 (またはcookie ) の変更をリッスンします。場所の例:

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

難しいのは、直接ナビゲーションを可能にすることです。最初は、データソースはアイテムの数について何も知らないため、最初のページ以外のページをリクエストすることはできません。したがって、必ずリクエストしてください。

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

応答が取得されて処理されると、' hashchange ' ハンドラーをトリガーしてグリッドを更新することができます(たとえば、ajax 呼び出しの' success ' ハンドラーで):

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

Answer 4

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

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