是否有表明剑道网格已被渲染的事件？答案

【问题标题】：Is there an event indicating that a Kendo Grid has been rendered?是否有表明剑道网格已被渲染的事件？
【发布时间】：2014-11-02 01:13:50
【问题描述】：

我想在 Kendo 网格渲染后对其进行一些更改（显示/隐藏列等）。然而，Kendo 网格不提供任何onRendered 事件。那么我该怎么做呢？

之前，我使用dataBound 事件来执行此操作。它曾经可以正常工作，因为当数据从 AJAX 请求到达时，网格已经被渲染了。但是，我的用例发生了变化——在声明网格时数据现在已经可用。所以dataBound 事件中的代码没有找到网格。在下面的代码中if (grid) 总是返回false：

$('#mygrid').kendoGrid({

    dataSource: {
        data: myGridData
    },

    dataBound: function() {
        // Check if the grid has been rendered
        var grid = $('#mygrid').data('kendoGrid');
        if (grid) {
            // Show/hide columns
            ...
        }
    },

    ...
});

我还尝试在 kendoGrid() 调用之后移动检查，但这仍然不起作用。调用后网格尚未立即渲染。

$('#mygrid').kendoGrid({

    dataSource: {
        data: myGridData
    },

    ...
});

// Check if the grid has been rendered
var grid = $('#mygrid').data('kendoGrid');
if (grid) {
    // Show/hide columns
    ...
}

我可以在进行检查之前使用 setTimeout()，但这感觉就像是 hack！还有其他方法吗？ Kendo Grid 可以引入诸如onRendered 之类的事件吗？我觉得这将是解决这个问题的正确方法。

提前感谢您的宝贵时间。

【问题讨论】：

似乎在 Dojo 中可以正常工作：dojo.telerik.com/aLUXA
@CodingWithSpike，谢谢你的例子。这似乎表明数据绑定应该可以工作。不幸的是，我无法在我的代码中复制它。尝试在数据绑定函数中放置断点 - $('#mygrid') 存在，但 $('#mygrid').data('kendoGrid') 不存在。仍在试图弄清楚发生了什么。有什么想法吗？
您可能能够通过传递给事件处理程序的参数返回到网格小部件。尝试类似：dataBound: function (dataBoundEvent) { var gridWidget = dataBoundEvent.sender; } 或者该事件对象中的其他内容？
好的，我可以使用dataBoundEvent.sender 进入网格。它确实给了我一个解决方法，但它并不漂亮 - 现在我必须将网格传递给所有嵌套函数。你能想到为什么dataBoundEvent 知道网格但$('#mygrid').data('kendoGrid') 不返回它的任何原因？
没有线索。我以前从未真正见过。我也觉得奇怪。查看您的#grid 元素是否具有data-role="grid" 属性。无论具有data-role 的元素都应该是您调用.data("kendoGrid") 的元素。你也可以试试 Kendo UI Chrome Extension 看看它是否能找到你的网格：chrome.google.com/webstore/detail/telerik-kendo-ui-chrome-i/…

标签： kendo-ui kendo-grid

【解决方案1】：

终于明白了！这根本不是 Kendo UI 的问题。这是 Marionette 框架的一个错误。在我试图做 $('#mygrid').data('kendoGrid') 的时候，#mygrid 没有附加到 DOM - 渲染是在非 DOM 执行的。自然选择器什么也没返回！所以我为木偶和剑道网格设置了一个解决方法，开始工作得很好！

【讨论】：

【解决方案2】：

$("#grid").on("DOMSubtreeModified", function () {
  var grid = $("#grid").data("kendoGrid");
  if (grid) {
    console.log("Grid is ready!"); 

    /* Note that dataSource will not be available here. 
    You can however start attaching event handlers e.g. 
    grid.bind("dataBound", func) */

    $("#grid").off("DOMSubtreeModified");
  }        
});

【讨论】：