Kendo UI Grid 发布渲染或发布数据绑定事件？答案

【问题标题】：Kendo UI Grid post rendered or post databound event?Kendo UI Grid 发布渲染或发布数据绑定事件？
【发布时间】：2014-03-12 16:15:33
【问题描述】：

有没有办法在通过 ajax 重新加载网格后触发事件？

我看到了 RequestEnd 事件。但这似乎发生在请求返回时，但在网格刷新之前。

我还看到了 DataBound 事件。但这发生在 RequestEnd 之前，
同样当我实现 DataBound 事件时，我的标题消失了..

我不得不求助于这个黑客

function requestEnd(o) {
    console.debug('request ended.', o);
    setTimeout(refreshEditable, 500); // enough time to render the grid
}
function refreshEditable() {
    // perform my actions on controls within grid content
}

附带说明.. 我很难找到可靠的 kendo grid mvc API 参考。当我用谷歌搜索它时，我得到了这个： http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/migration/widgets/grid 这是一些小方法和一些“事件”的集合，但这些与我在 razor intelisense 中看到的不对应。

更新：添加数据绑定定义

    $('#grid').kendoGrid({
        dataBound: function(e) {
            console.debug('data bound..');
        }
    });

这里是网格 ajax 定义

   .Ajax().Read(read => read
        .Action("FilesRead", "SomeController")
        .Data("readData"))

 function readData() {
    return {
        IncludeChildren: $("#IncludeChildren").is(':checked'),
        SearchString: $('input[id=SearchString]').val()
    };
 }

我可以看到 DataBound 在进行 ajax 调用时被触发，而不是在它返回之后。

更新

更正了 DataBound 事件挂钩。

在 dataBound 函数中，我正在尝试获取对新呈现的模板的引用..

function dataBound(o) {
  console.debug($('span.editable').length);                    // returns 0 
  setTimeout("console.debug($('span.editable').length)", 500); // returns 4
}

使用客户端模板添加跨度

.ClientTemplate(@"<span class=""editable"" ... >#=DOCUMENT_DATE_FORMATTED#</span>");

明白我的意思了吗？数据绑定发生在网格渲染之前

【问题讨论】：

DOM更新后触发DataBound事件；如果你没有得到你预期的结果，那么你的代码有问题，所以你应该添加
@LarsHöppner 添加了该代码。如果需要更多信息，请告诉我。
那些 span.editable 元素是哪个模板的一部分？
它们在 ClientTemplates 中的几列.. 使最新代码更加清晰.. 字段确实显示了，只是在 DataBound 之后有一些延迟.. 所以很明显这个事件发生在渲染之前新行数
还添加了客户端模板定义.. 我正在寻找的是在添加行后触发的事件

标签： javascript kendo-ui telerik kendo-grid telerik-grid

【解决方案1】：

请参阅取自 documentation（有关事件的 API 文档为 here）的示例代码，了解如何使用 MVC 包装器绑定事件处理程序：

@(Html.Kendo().Grid(Model)
      .Name("grid")
      .Events(e => e
          .DataBound("grid_dataBound")
          .Change("grid_change")
      )
)
<script>
function grid_dataBound() {
    //Handle the dataBound event
}

function grid_change() {
    //Handle the change event
}
</script>

如果你想在 JavaScript 中绑定一个处理程序，你需要像这样访问网格：

var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", function(e) {});

当您在此处执行此操作时：

$('#grid').kendoGrid({
    dataBound: function(e) {
        console.debug('data bound..');
    }
});

您实际上创建了一个新的网格实例。

【讨论】：

正确.. 我错过了新实例部分，我正在查看的事件在 DataSource 上，而不是在 Grid 上。您发布的文档的问题是如何撰写文章。我真的很想找到一个 Events api 文档.. 这似乎是一项不可能完成的任务
实际上 DataBound 仍然发生得太快了。它发生在取回集合的同时，但在呈现内容之前。我知道这是因为我调用了一些选择渲染元素的 javascript.. 我会发布一个示例
作为一个有趣的奖励，当我只使用 console.debug 行添加 dataBound: function(e) 定义时，我的整个网格标题都会下降到网格的底部！
好吧，这显然不应该发生......不幸的是，如果没有问题的演示，我将无能为力

【解决方案2】：

你可以这样使用：

 transport: {
           read: {
           url: searchUrl,
           type: "POST",
           dataType: "json",
           data: additionalData,
           complete: function () {
              //code here :)
           }
        },                   
     },

【讨论】：

【解决方案3】：

我遇到过这样的情况，（在紧要关头），当网格将行插入 DOM 时，可能会部署 MutationObserver 以“感知”。在大多数情况下，网格自己的 dataBound 事件就足够了。但是，当有：

渲染阻塞 JS，可能在初始页面加载时，和/或
连接速度慢/延迟高，和/或
来自服务器端包装器的 Kendo JS 结构不佳，混杂在脚本块中

无论如何，在渲染行之前，隐藏在网格中的 tbody 标记将如下所示：

               <tbody>
                   <tr class="k-no-data">
                       <td colspan="9"></td>
                   </tr>
               </tbody>

在行被渲染后它会像这样：

 <tbody role="rowgroup">
    <tr data-uid="004c8970-ba7e-4e3c-ae54-2695c6cbdbe8" role="row" class="k-state-selected"
       aria-selected="true">
       <td role="gridcell">07/18/2004</td>
       <td role="gridcell">24</td>
       <td role="gridcell">1890</td>
       <td role="gridcell">0</td>
       <td role="gridcell">176</td>
       <td role="gridcell">0</td>
       <td role="gridcell">2439</td>
       <td role="gridcell">2500</td>
       <td role="gridcell"></td>
    </tr>
      .....more rows, then
 </tbody>

所以，类似：

    let observer = new MutationObserver(mCallback);
    function mCallback(mutations) {
        for (let mutation of mutations) {
            if (mutation.addedNodes.length > 0) {
                doAutoDemoChart();
            }
        }
    }
    let observerOptions = { childList: true }
    let gridContent = document.querySelector("#dailyProdGrid div.k-grid-content tbody")
    observer.observe(gridContent, observerOptions);

将检测 DOM 的变化。实际上，这会创建一个“rowsRendered”网格事件。我的情况是，图表演示的行数很多；（见here）。以编程方式，需要选择行（基于规定的日期范围），然后打开一个窗口并用对数图表填充。

【讨论】：