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

【问题标题】：Telerik Kendo UI grid loses custom command event handler after persisting (and restoring) its stateTelerik Kendo UI 网格在保持（和恢复）其状态后丢失自定义命令事件处理程序
【发布时间】：2015-05-08 13:13:57
【问题描述】：

我已隔离问题，请查看并尝试full source here。

重现步骤：

按Ctrl+Enter运行sn-p
点击“Say Hello”自定义命令按钮，检查事件是否发生处理程序运行
点击左上角的“保存状态”按钮
点击“Load State”按钮，恢复之前的状态。
现在再次单击“Say Hello”按钮并演示事件句柄不会运行，而是发生了一些奇怪的事情。

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

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

【问题讨论】：

标签： javascript jquery telerik kendo-grid

【解决方案1】：

希望这会对您有所帮助。

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

我为你添加了以下代码：

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

},

当重新绑定发生时，我怀疑它正在失去与事件处理程序的连接，所以如果根据它的类名查找按钮并重新附加它，我所做的一切。

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

任何问题让我知道。

【讨论】：

大卫·肖索。谢谢我想出了类似的东西。请注意，dataBound 将运行多次，因此您还要多次附加事件处理程序，然后它会意外触发多次。我的解决方案是（无条件地）使用 .off(....).on(....)。可怕的解决方案，如果网格持久性按预期工作，那就太好了。还发现了其他问题，我整天都在与持久性作斗争
我想您可以检查元素是否已被破坏，即分页、过滤、排序等，如果不存在则重新附加事件。在我的场景中，我通常将客户端模板用于任何“可点击”操作，然后将事件处理程序应用于模板化项目，因此对于可能为同一事件添加多个处理程序没有任何问题。也许如果您遇到很多问题，请尝试向 Telerik 提出支持请求（如果您有支持），看看他们是否可以提出合适的答案。

【解决方案2】：

调用 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());

    }

【讨论】：