Kendo Grid Persist State打破了可编辑的弹出功能

时间：2017-08-03 02:29:34

标签： angular kendo-ui grid

在下面的示例中，如果我对网格进行更改（删除列），保存状态，进行另一次更改（删除另一列），加载状态，网格视觉会正确显示。

问题是，单击编辑或新建站点按钮不再有效。您可以看到弹出窗口未完全呈现。在使用get选项加载状态之前，弹出窗口工作正常。

有谁知道如何解决这个问题？

请在此处查看摘录：http://dojo.telerik.com/@joe.gloeckner@rminsight.net/OHUSU

所有代码：

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">




      <div id="wrapper">
         <div class="box wide">
                <a href="#" class="k-button" id="save">Save State</a>
                <a href="#" class="k-button" id="load">Load State</a>
            </div>

        <div id="grid" kendo-grid="siteGrid" k-options="siteGridOptions"></div>


    <script type="text/x-kendo-template" id="editSiteTemplate">
        <div class="k-edit-form-container">
            <div class="alert alert-danger" ng-show="crudError != ''">{{crudError}}</div>
            <div class="k-edit-label"><label for="AMTAssetNumber">AMT Asset No.</label></div>
            <div class="k-edit-field" data-container-for="AMTAssetNumber">
                <input name="AMTAssetNumber" class="k-input k-textbox" required="required" type="text" ng-change="dataItem.dirty=true" ng-model="dataItem.AMTAssetNumber">
            </div>
            <div class="k-edit-label"><label for="Carrier">Carrier</label></div><div class="k-edit-field" data-container-for="Carrier">
                <input name="Carrier" class="k-input k-textbox" required="required" type="text" ng-change="dataItem.dirty=true" ng-model="dataItem.Carrier">
            </div>

            <div class="k-edit-label"><label for="CarrierSiteNumber">Carrier Site Number</label></div><div class="k-edit-field" data-container-for="CarrierSiteNumber">
                <input name="CarrierSiteNumber" class="k-input k-textbox" required="required" type="text" ng-change="dataItem.dirty=true" ng-model="dataItem.CarrierSiteNumber">
            </div>

            <div class="k-edit-label"><label for="InfinigyJobNumber">Infinigy Job Number</label></div><div class="k-edit-field" data-container-for="InfinigyJobNumber">
                <input name="InfinigyJobNumber" class="k-input k-textbox" required="required" type="text" ng-change="dataItem.dirty=true" ng-model="dataItem.InfinigyJobNumber">
            </div>


            </div>

        </div>
    </script>



    </div>
</div>


<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
      var data = [
    {
        "Id": 1074,
        "AMTAssetNumber": "5070",
        "Carrier": "Verizon",
        "CarrierSiteNumber": "62002",
        "InfinigyJobNumber": "317-403"

    },
    {
        "Id": 1075,
        "AMTAssetNumber": "5070",
        "Carrier": "T-MOBILE",
        "CarrierSiteNumber": "A2P0014A",
        "InfinigyJobNumber": "317-400"

    },
    {
        "Id": 1076,
        "AMTAssetNumber": "5130",
        "Carrier": "Verizon",
        "CarrierSiteNumber": "62008",
        "InfinigyJobNumber": "317-403"
    }];
      var crudUrl = "";
               $scope.siteGridOptions = {
            toolbar: [{ name: "create", text: "New Site" },
                     { template: "<span class='k-button k-primary' ng-click='exportFilteredData($event)'> Export Filtered</span>" }
            ],
            editable: {
                mode: "popup",
                confirmation: "Are you sure you want to delete this site?",
               template: kendo.template($("#editSiteTemplate").html())
            },

            dataSource: {
              data: data,
                pageSize: 15,
                error: function (e) {
                    logError(e.errorThrown);
                },

                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { defaultValue: 0, editable: false },
                            AMTAssetNumber: { editable: false, nullable: true, type: 'number' },
                            Carrier: { validation: { required: true } },
                            CarrierSiteNumber: { validation: { required: true } },
                            InfinigyJobNumber: { validation: { required: true } }

                        }
                    }
                },
            },
            edit: function (e) {
                var mod = e.container.find("input[name=ModifiedBy]");
                e.model.ModifiedBy = "test";
                mod.val("test");
            },
            dataBound: function (e) {
                // $scope.siteGrid.resize(true);
                var grid = this;
                var dataSource = this.dataSource;

                // iterate the data items and apply row styles where necessary
                var dataItems = e.sender.dataSource.view();
                for (var j = 0; j < dataItems.length; j++) {
                    var completed = dataItems[j].get("Completed");
                    var onhold = dataItems[j].get("OnHold");
                    var waiting = dataItems[j].get("Waiting");
                    var state = dataItems[j].get("State");

                    var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");
                    var lockedrow = e.sender.lockedTable.find("[data-uid='" + dataItems[j].uid + "']");

                    if (completed != undefined) {
                        if (completed) {
                            row.addClass("completed");
                        }
                    }

                    else if (waiting != undefined) {
                        if (waiting) {
                            row.addClass("waiting");
                        }
                    }

                    else if (onhold != undefined) {
                        if (onhold.toUpperCase() === "YES") {
                            row.addClass("onhold");
                        }
                    }

                    if (state != undefined) {
                        if ($.inArray(state, common.northeast) > -1 || $.inArray(state, common.midwest) > -1) {
                            lockedrow.addClass("northeast");
                        }
                    }

                    if (state != undefined) {
                        if ($.inArray(state, common.southeast) > -1) {
                            lockedrow.addClass("southeast");
                        }
                    }

                    if (state != undefined) {
                        if ($.inArray(state, common.west) > -1 || $.inArray(state, common.westcoast) > -1) {
                            lockedrow.addClass("west");
                        }
                    }



                }

            },
            autoBind: true,
            height: 690,
            scrollable: true,
            sortable: true,
            reorderable: true,
            groupable: true,
            resizable: true,
            filterable: true,
            columnMenu: true,
            pageable: {
                refresh: true,
                pageSizes: [10, 25, 50, 100, 250, 500, 1000, 'all'],
                buttonCount: 5
            },
            columns: [
                {
                    command: [
                        {
                            name: 'edit',
                            text: ""                           
                        }
                    ], width: "155px", locked: true
                },
                {
                    field: "AMTAssetNumber", title: "AMT Asset #", width: "120px", filterable: {
                        ui: function (element) {
                            element.kendoNumericTextBox({

                                spinners: false,
                                format: "#",
                                decimals: 0
                            });
                        }
                    }
                },
                {
                    field: "Carrier", title: "Carrier", filterable: { multi: true, search: true }, width: "120px"
                },
                {
                    field: "CarrierSiteNumber", title: "Carrier Site #", width: "120px"
                },
                {
                    field: "InfinigyJobNumber", title: "Infinigy Job #", filterable: { multi: true, search: true }, width: "120px"
                }

            ]
        };



       $("#save").click(function (e) {
                        e.preventDefault();
                        localStorage["kendo-grid-options"] = kendo.stringify($scope.siteGrid.getOptions());
                    });

                    $("#load").click(function (e) {
                        e.preventDefault();
                        var options = localStorage["kendo-grid-options"];
                        if (options) {
                            $scope.siteGrid.setOptions(JSON.parse(options));
                        }
                    });


        })
</script>


</body>
</html>

1 个答案:

答案 0 :(得分：0)

JSON.stringify不保留函数引用。在重新创建Grid实例之前，您需要手动将这些对象还原到options对象。恢复还应包括kendo.template（）调用，因为它也返回一个函数。

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

相关问题
最新问题