问题 serializing/deserializing kendo 网格设置

Question

希望有人有解决方案。我们有几个在网格列上具有自定义多选的网格。 The issue is that JSON seems to be refusing to properly serialize/deserialize them when there's more than one option selected. 这有效：

a = $("#grid").data("kendoGrid").getOptions();

$("#grid").data("kendoGrid").setOptions(a);

但是这会中断：

a = JSON.parse(JSON.stringify($("#grid").data("kendoGrid").getOptions()));

$("#grid").data("kendoGrid").setOptions(a);

令人讨厌的部分肯定是等式的序列化部分搞砸了，所以事实证明很难准确地发现它应该看起来如何与修改后实际看起来如何。字符串比较相等。有什么建议吗？

示例中断：a 列有一个复选框下拉网格过滤器，其中包含三个选项：1、2、3。选择多个选项会在保存然后加载时中断网格。仅选择一个或零个有效。

编辑：这是网格初始化：请注意，DCGrid 是 kendo 网格的覆盖，它设置所有网格共有的属性，例如页面大小。

@(Html.DCGrid<Order>("grid")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Sort(s => { if (Request.QueryString.Keys.Count == 0) { s.Add(x => x.OrderNum).Ascending(); } })
                .Model(model => model.Id(o => o.ID))
                .PageSize(Settings.DefaultPageSize)
                .Read(read => read.Action("Read", "OrderSearch").Data("getParameters"))
            )
            .Events(e => e.ColumnReorder("onColumnReorder"))
            .Reorderable(r => r.Columns(true))
            .ColumnMenu()
            .Columns(columns =>
            {
                if (User.IsInRole("viewOrders"))
                {
                    columns.Template(@<text></text>)
                            .ClientTemplate("#= rowCommandsUndelete(data, true, false) #")
                            .HtmlAttributes(new { reorderable = "false" })
                            .Title("&nbsp;")
                            .Width(86);
                }
                columns.Bound(o => o.OrderNum)
                    .Width(120);
                columns.Bound(o => o.Status.Name)
                    .ClientTemplate("#= clientTemplateOrderStatus(data) #")
                    .Width(120);
                columns.Bound(o => o.Priority.ID).Title("Priority").Width(100)
                    .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetData/Priority", "Support", new { nameField = "PriorityNum" }))).ItemTemplate("kendoGridFilterData.IDTemplate"));
                columns.Bound(o => o.OrderDate)
                    .Width(120);
                columns.Bound(o => o.DueDate)
                    .ClientTemplate("#= clientTemplateDueDate(data) #")
                    .Width(140);
                columns.Bound(o => o.Product.ID)
                    .ClientTemplate("#=ellipseDiv(data.Product.ShortName)#")
                    .Title("Product")
                    .Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetData/Product", "Support", new { idField = "ID", nameField = "ShortName" }))).ItemTemplate("kendoGridFilterData.IDTemplate"))
                    .Width(200);
                columns.Bound(o => o.DispatchConfirmNum)
                    .Width(140);
                    .ClientTemplate(CustomGridHelperExtensions.EditTemplate("Origin", "Name") + " #if(drillToValue(data, 'Origin.H2S')) {# <span class='label label-danger margin-left-right-5px'>H2S</span> #}#")
                    .Width(250);
                columns.Bound(o => o.OriginTank.TankNum)
                    .ClientTemplate("<a href='/OriginTanks?OriginId=#=data.OriginID#'>#=ellipseDiv(data.OriginTank.TankNum)#</a>")
                    .Width(100);
                columns.Bound(o => o.OriginBOLNum)
                    .Width(130);
                columns.Bound(o => o.Destination.Name)
                    .ClientTemplate("<a href='/Destinations?id= #=data.DestinationID# '>#=ellipseDiv(data.Destination.Name)#</a>")
                    .Title("Destination")
                    .Width(250);
                columns.Bound(o => o.Carrier.Name)
                    .Title("Carrier")
                    .ClientTemplate("<a href='/carriers?id= #=data.CarrierID# '>#=ellipseDiv(data.Carrier.Name)#</a>")
                    .Width(170);
                columns.Bound(o => o.Driver.FullName)
                    .ClientTemplate("<a href='/Drivers?IDNumber=#=data.Driver.IDNumber# '>#=ellipseDiv(data.Driver.FullName)#</a>")
                    .Width(170);
            })
        )

这是 idtemplate (javascript):

  IDTemplate: function (e) {
        return "<li><label class='k-label'><input type='checkbox' value='#:data.ID#'/>#:data.Name || data.all#</label></li>";
    }

我们唯一关心的选项是排序、过滤器、列可见性、列宽和列位置（用于重新排列）。

Answer 1

您不能对函数进行字符串化。例如：

let test = {
   label: 'this is label',
   calculate: function(){
     return 2 + 2;
  }
};

let toString = JSON.stringify(test);
console.log(toString); //returns {"label":"this is label"}

undefined, Functions, and Symbols are not valid JSON values. If any
such values are encountered during conversion they are either omitted (when found in an object) or changed to null (when found in an
array). JSON.stringify() can return undefined when passing in "pure"
values like JSON.stringify(function(){}) or
JSON.stringify(undefined).

资源：JSON.stringify()

您可以遍历加载选项中的列并再次设置属性，如下所示：

let optionsObject = JSON.parse(options);
for (let i = 0; i < optionsObject.columns.length; i++) {
    let column = optionsObject.columns[i];
    if (column.field) {
        switch (column.field) {
            case 'field1':
                column.template = kendo.template($('#field-1-template').html());
                break;
            case 'field2':
                column.template = kendo.template($('#field-2-template').html());
                break;

            default:
                break;
        }
    }
}

在为列设置属性后设置网格选项：

$("#grid").data("kendoGrid").setOptions(optionsObject);

问题 serializing/deserializing kendo 网格设置

problem serializing/deserializing kendo grid settings

javascript

json

kendo-ui

kendo-grid

telerik-grid