Question

有没有办法在通过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 这是一个小方法和一些“事件”的集合，但那些与我在剃刀知识分子中看到的不一致。

更新：添加数据绑定定义

    $('#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()
    };
 }

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

更新

更正了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>");

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

Answer 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..');
    }
});

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

Answer 2

您可以使用这种方式：

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

Answer 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）。以编程方式，需要选择行（基于规定的日期范围），然后打开一个窗口并填充对数图表。

Kendo UI Grid帖子呈现或发布数据绑定事件？

3 个答案: