javascript - Kendo UI Grid 渲染后或数据绑定(bind)事件后?

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

有没有办法在通过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 中看到的内容并不相符。

更新:添加数据绑定(bind)定义

    $('#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 事件 Hook 。

在 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>");

明白我的意思吗?数据绑定(bind)发生在网格渲染之前

最佳答案

请参阅取自 documentation 的示例代码(有关事件的 API 文档为 here )有关如何使用 MVC 包装器绑定(bind)事件处理程序:

@(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 中绑定(bind)处理程序,你需要像这样访问网格:

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

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

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

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

关于javascript - Kendo UI Grid 渲染后或数据绑定(bind)事件后?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21760103/

相关文章:

javascript - 如果 JQuery UI 布局没有显示任何内容,则隐藏北面板

javascript - backbone.js 中的自动 _.bindAll()

mvvm - kendo 可排序小部件 mvvm UI 故障

asp.net - Radgrid 停止同时添加新行和编辑行的功能

c# - 在 .net 中设置 telerik RadFileExplorer 的 ViewPaths

javascript - Kendo UI Treeview 追加函数性能

java - 如何获取Ext Tree子节点的id?

javascript - 带有内联编辑的光滑网格选择框,在选择值后显示文本

asp.net-mvc-3 - 如何设置 Kendo UI 自动完成控件的宽度

ios - 在使用 angularJS 的 Kendo UI 中,如何避免 iOS 7 及更高版本中状态栏和导航栏的重叠