加载 Telerik MVC 网格状态答案

【问题标题】：Load Telerik MVC Grid State加载 Telerik MVC 网格状态
【发布时间】：2014-05-15 17:12:16
【问题描述】：

我在保存/加载 Telerik MVC 网格控件的状态时遇到了一些问题。

我找到了许多使用 Kendo 网格的示例，但是我们没有访问权限或资源来将我们的系统从原始 Telerik MVC Grids 更改为 Kendo。

我可以使用带有以下代码的 Cookie 保存和加载网格的当前状态：

function setState() {
    var pricingGrid = $("#PricingGrid").data("tGrid");
    var dataSource = pricingGrid.dataSource;
    var state = JSON.stringify({
        page: pricingGrid.page,
        pageSize: pricingGrid.pageSize,
        sort: pricingGrid.orderBy,
        group: pricingGrid.groupBy,
        filter: pricingGrid.filterBy
    });

    $.cookie("pricingGridState", state);
}


function loadState() {
    var grid = $("#PricingGrid").data("tGrid");
    var state = JSON.parse($.cookie("pricingGridState"));
    if (state)
    {
        grid.sort(state.sort);
        grid.pageTo(state.page);
        grid.filter(state.filter);
    }
}

这段代码似乎可以解决问题，但它会为每个方法（sort、pageTo 和 filter）触发一个 Rebind 调用。我计划在页面上保存多个网格的状态，并且不希望每个网格在页面加载时重新绑定 3 次。

在 Kendo 中，我似乎可以使用“grid.dataSource.query”方法，但在 Telerik MVC 中我似乎无法获得类似的东西。

感谢任何帮助！

注意：我也尝试将 State 对象从 grid.dataSource 属性中保存下来，但这些对象似乎根本没有加载网格状态。

【问题讨论】：

标签： jquery asp.net-mvc-4 telerik-grid telerik-mvc

【解决方案1】：

经过一些研究，我能够找到适合我的解决方案。这是我所做的：

//Prevent auto binding of grid and load state from cookie
var gridsToBind = [];    
function CommonGrid_onDataBinding(e) {
    if ($.inArray(e.target.id, gridsToBind) == -1) {
        e.preventDefault();
        gridsToBind.push(e.target.id);
        LoadGridState();
    }
}    
function LoadGridState() {
    var grid = $("#CommonGrid").data('tGrid');
    var state = $.cookie("gridState");
    if (state) {
        state = JSON.parse(state);
        grid.currentPage = state.currentPage;
        grid.orderBy = state.orderBy;
        grid.filterBy = state.filterBy;
        grid.pageSize = state.pageSize;
        for (var i in state.filteredCols) {
            if (state.filteredCols.hasOwnProperty(i)) {
                grid.columns[i].filters = state.filteredCols[i].filters;
                $("a[href*='=" + grid.columns[i].member + "-'").siblings(".t-grid-filter").addClass("t-active-filter");
            }
        }
        $("#CommonGrid").data('tGrid', grid);
    }
    grid.ajaxRequest();        
}

//Logic to save state of grid in cookie
function CommonGrid_OnDataBound(e) {
    var filteredCols = {};
    $.each(grid.columns, function (i, n) {
        if (!!n.filters) {
            filteredCols[i] = n;
        }
    });
    var state = JSON.stringify({
        currentPage: grid.currentPage,
        orderBy: grid.orderBy,
        filterBy: grid.filterBy,
        pageSize: grid.pageSize,
        filteredCols: filteredCols
    });
    $.cookie("gridState", state);
}

【讨论】：

【解决方案2】：

我应用了前面的示例 Sanjeev Rai：在 Telerik Grid 上使用时需要一些调整

.DataBinding(o =>
    {
        o.Ajax().Select(ajaxSelectActionName, controllerName);
    })

在这种情况下，function LoadGridState() 中的最后一行 grid.ajaxRequest(); 应该被注释以避免递归。否则，解决方案非常优雅。谢谢你

【讨论】：