Telerik Kendo UI 网格在保留（和恢复）其状态后丢失自定义命令事件处理程序

Question

我已隔离该问题，请在此处查看并尝试完整源代码。

重现步骤：

1. 按 Ctrl+Enter 运行代码片段

2. 单击“Say Hello”自定义命令按钮，然后检查事件是否 处理程序运行

3. 单击左上角的“保存状态”按钮
4. 点击‘Load State’按钮，恢复之前的状态。
5. 现在再次单击“Say Hello”按钮并演示事件句柄将不会运行，而是发生了一些奇怪的事情。

注意：请不要围绕localStorage寻找解决方案。可以通过使用不同的服务器端状态持久解决方案来重现该问题。 （就像我原来的应用程序一样）

知道在哪里打补丁吗？ ...或解决方法？

Answer 1

调用 grid.setOptions() 后保留函数引用 在将函数引用传递给 setOptions 方法之前，我将函数引用添加回反序列化的配置对象。 ( http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions )

    $(document).ready(function () {
        var grid = $("#myGrid").data("kendoGrid");
        var originalOptions = grid.getOptions();
        var savedOptions = JSON.parse(localStorage["myGrid-options"]);
        if (savedOptions) {
            var detaylarFunc = originalOptions.columns[3].command[0].click;
            savedOptions.columns[3].command[0].click = detaylarFunc;
            grid.setOptions(savedOptions);
        } else {
            grid.dataSource.read();
        }
    });

    //Custom command
    function Detaylar(e) {
        e.preventDefault();

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

    }

Answer 2

希望这对您有帮助。

http://dojo.telerik.com/EDUCO/4

我为您添加了以下代码：

dataBound: function (e) {
    $(".k-grid-SayHello").on('click', function (a) {
        console.log(e);
        a.preventDefault();
        alert('Hello');
    });

},

当重新绑定发生时，我怀疑它正在丢失与事件处理程序的连接，因此我所做的就是根据按钮的类名查找按钮并重新连接它。

显然，您可以调整解决方案来满足您的需求，但是当我需要“调用”按钮上的自定义操作/动态创建动态内容时，这是我为我的项目所做的事情。

有任何问题请告诉我。

Answer 3

在 T10 的答案的基础上，我创建了一个通用函数，将点击事件映射到新选项。 没有简单的方法来匹配我找到的列，

uid

上的

column

属性会随着每次重新加载而改变，所以我在这里匹配

name

的

command

属性，这不能保证是唯一的，如果有人有 100% 可靠的解决方案，请分享。

function setOptionsWithClickEvents(grid, newOptions) {
    var originalOptions = grid.getOptions();
    for (var i = 0; i < originalOptions.columns.length; i++) {
        if (originalOptions.columns[i].command) {
            for (var y = 0; y < originalOptions.columns[i].command.length; y++) {
                var command = originalOptions.columns[i].command[y];
                if (command) {
                    for (var a = 0; a < newOptions.columns.length; a++) {
                        if (newOptions.columns[a].command) {
                            for (var b = 0; b < newOptions.columns[a].command.length; b++) {
                                var targetCommand = newOptions.columns[a].command[b];
                                if (targetCommand.name === command.name) {
                                    targetCommand.click = command.click;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    grid.setOptions(newOptions);
}

因此，如果您从本地存储加载状态：

    var optionsJson = localStorage['my-storage-key'];
    if (optionsJson) {
        var grid = $('#my-grid').data('kendoGrid');
        var options = JSON.parse(optionsJson);
        setOptionsWithClickEvents(grid, options);
    }