Question

在使用自定义命令列时，mvc网格中存在问题。这是网格的包装

 @(Html.Kendo().Grid < Weighmaster_Web.Data.Entity.Destination > ()
   .Name("grid")
   .Columns(columns => {
     columns.Bound(c => c.Description);
     columns.Bound(c => c.CODE);
     columns.Command(c => {
       if (bUpdate) c.Custom("Edit").Click("editItem");
       if (bDelete) c.Custom("Delete").Click("deleteItem");
     }).Width(175);
   })
   .Scrollable()
   .Groupable()
   .Sortable()
   .ToolBar(toolbar => {
     if (bCreate) {
       toolbar.Create().HtmlAttributes(new {
         id = "addDestination"
       }).Text("Add Destination");
     }
   })
   .ToolBar(t => t.Excel())
   .Excel(excel => excel
     .FileName("Destinations.xlsx")
     .Filterable(true)
     .AllPages(true)
     .ProxyURL(Url.Action("Excel_Export_Save", "MaterialTransaction"))
   )
   .Filterable(filterable => filterable.Extra(false))
   .Resizable(resize => resize.Columns(true))
   .Reorderable(reorder => reorder.Columns(true))
   .Pageable(pageable => pageable
     .Refresh(true)
     .PageSizes(true)
     .ButtonCount(5))
   .DataSource(dataSource => dataSource
     .Ajax()
     .Events(events => events.Error("error_handler"))
     .Read(read => read.Action("DestinationIndex", "Destination").Type(HttpVerbs.Post))
     .Model(model => model.Id(p => p.Id))
     .PageSize(20)
     .Create(update => update.Action("DestinationSave", "Destination").Type(HttpVerbs.Post)))
 )

这里我在包装器中为编辑和删除按钮定义了一个单击事件处理程序。我正在使用自定义命令，以便我可以定义自定义编辑模板。

当你查看这个包装器的实际jquery时，我可以看到定义了事件处理程序。

然后当您离开页面时，运行此代码以将网格的状态保存在cookie中：

$(window).unload(function () {
    var grid = $("#grid").data("kendoGrid");
    var dataSource = grid.dataSource;
    var state = {
        columns: grid.columns,
        page: dataSource.page(),
        pageSize: dataSource.pageSize(),
        sort: dataSource.sort(),
        filter: dataSource.filter(),
        group: dataSource.group()
    };

    $.cookie(username + "DestinationGridState", JSON.stringify(state), { expires: 365 });


})

从$（document）中的cookie读取网格的状态。就像这样：

$(document).ready(function () {     

     var grid = $("#grid").data("kendoGrid");      
     var toolbar = $("#grid").find(".k-grid-toolbar").html();
     var state = $.cookie(username +  "DestinationGridState");
    if (state) {           

        state = JSON.parse(state);                
        var options = grid.options;
        options.columns = state.columns;
        options.dataSource.page = state.page;
        options.dataSource.pageSize = state.pageSize;
        options.dataSource.sort = state.sort;
        options.dataSource.filter = state.filter;
        options.dataSource.group = state.group;
        if (grid) {
            grid.destroy();
            //grid.wrapper.html("");
        }

        $("#grid").empty().kendoGrid(options).find(".k-grid-toolbar").html(toolbar);
    }





});

从cookie中读取网格状态后，没有为自定义编辑命令按钮定义单击事件处理程序。所以，我想我的问题是;如何正确保存网格状态，以便我的自定义命令按钮将保留其事件处理程序？

Answer 1

正如kendo文档中所述：

JSON.stringify（）无法序列化函数引用（例如事件处理程序），所以如果字符串化用于检索的网格状态，所有表示函数引用的配置字段都是丢失。

当我尝试在会话中保存过滤器值时，我曾遇到过同样的问题。我就像你一样，但后来我意识到我不需要恢复列状态。如果您删除行options.columns = state.columns; 自定义命令将按预期工作。

希望它有所帮助。

Answer 2

I had a similar problem. After loading the settings my custom delete button stopped working. This was the solution that I came up with:

Save the original grid options. After parsing the saved settings, restore the original values, in this case the column where my delete buttons was placed.

Hope this helps.

$("#Grid").on("click",
    ".loadsetting",
    function(e) {
        var grid = $("#Grid").data("kendoGrid");
        var originalOptions = grid.options; // Save original options

        e.preventDefault();

        var options = localStorage["msettings"];
        if (options) {
            var parsedOptions = JSON.parse(options);
            parsedOptions.toolbar = [
                {
                    template: $("#toolbarTemplate").html()
                }
            ];

            // Restore values
            parsedOptions.columns[30] = originalOptions.columns[30];

            grid.setOptions(parsedOptions);
        }
    });

使用自定义命令列在Kendo MVC Grid中保持状态？

2 个答案: