Javascript 剑道UI网格后期渲染还是后期数据绑定事件?
在通过ajax重新加载网格后,是否有方法触发事件 我看到了RequestEnd事件。但这似乎是在请求返回时发生的,但在网格刷新之前 我还看到了数据绑定事件。但这种情况甚至早于RequestEnd,Javascript 剑道UI网格后期渲染还是后期数据绑定事件?,javascript,kendo-ui,telerik,kendo-grid,telerik-grid,Javascript,Kendo Ui,Telerik,Kendo Grid,Telerik Grid,在通过ajax重新加载网格后,是否有方法触发事件 我看到了RequestEnd事件。但这似乎是在请求返回时发生的,但在网格刷新之前 我还看到了数据绑定事件。但这种情况甚至早于RequestEnd, 此外,当我实现数据绑定事件时,我的头也会消失 我不得不求助于这个黑客 函数请求端(o){ 调试('请求结束',o); setTimeout(refreshEditable,500);//有足够的时间渲染网格 } 函数refreshEditable(){ //对网格内容中的控件执行我的操作 } 作为旁
此外,当我实现数据绑定事件时,我的头也会消失 我不得不求助于这个黑客
函数请求端(o){
调试('请求结束',o);
setTimeout(refreshEditable,500);//有足够的时间渲染网格
}
函数refreshEditable(){
//对网格内容中的控件执行我的操作
}
作为旁注。。我很难找到一个可靠的剑道网格MVCAPI参考。当我搜索它时,我得到了以下信息:
这是一个小操作和一些“事件”的集合,但这些与我在razor Intellisense中看到的不一致
更新:添加数据绑定定义
$('#grid').kendoGrid({
dataBound: function(e) {
console.debug('data bound..');
}
});
.Ajax().Read(read => read
.Action("FilesRead", "SomeController")
.Data("readData"))
function readData() {
return {
IncludeChildren: $("#IncludeChildren").is(':checked'),
SearchString: $('input[id=SearchString]').val()
};
}
这里是网格ajax的定义
$('#grid').kendoGrid({
dataBound: function(e) {
console.debug('data bound..');
}
});
.Ajax().Read(read => read
.Action("FilesRead", "SomeController")
.Data("readData"))
function readData() {
return {
IncludeChildren: $("#IncludeChildren").is(':checked'),
SearchString: $('input[id=SearchString]').val()
};
}
我可以看到,数据绑定是在进行ajax调用时触发的,而不是在它返回后触发的
更新
更正了数据绑定事件挂钩
在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>");
.ClientTemplate(@“#=文档日期格式”);
明白我的意思吗?数据绑定发生在网格呈现之前有关如何使用MVC包装绑定事件处理程序的信息,请参见(API文档中关于事件的部分)中的示例代码:
@(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>
在此处执行此操作时:
$('#grid').kendoGrid({
dataBound: function(e) {
console.debug('data bound..');
}
});
您实际上创建了一个新的网格实例。您可以这样使用:
transport: {
read: {
url: searchUrl,
type: "POST",
dataType: "json",
data: additionalData,
complete: function () {
//code here :)
}
},
},
我曾经遇到过这样的情况,(在紧要关头),当网格将行插入DOM时,可能会部署一个MutationObserver来“感知”。在大多数情况下,网格自己的数据绑定事件就足够了。但是,当出现以下情况时:
- 渲染阻塞JS,可能在初始页面加载时,和/或
- 连接速度慢/延迟时间长,和/或
- 来自服务器端包装器的剑道JS结构混乱,与脚本块混合在一起
var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", function(e) {});
<tbody>
<tr class="k-no-data">
<td colspan="9"></td>
</tr>
</tbody>
将检测DOM中的更改。实际上,这将创建一个“rowsRendered”网格事件。我曾经遇到过这样一种情况:有很多人坐在一排的座位上观看图表演示;(见附件)。以编程方式,需要选择行(基于指定的日期范围),然后打开一个窗口并填充对数图表。更新DOM后会触发数据绑定事件;如果没有得到预期的结果,则代码有问题,因此应该添加that@LarsHöppner添加了该代码。。如果需要更多,请告诉我。那些span.editable元素是哪个模板的一部分?它们位于ClientTemplates中的少数列中。。使最新的代码更加清晰。。这些字段确实会出现,只是在数据绑定后有一些延迟。。因此,很明显,此事件发生在呈现新行之前,因此添加了客户端模板定义。。我要寻找的是一个事件,该事件在行被添加到正确位置后触发。。我错过了新的实例部分,我所看到的事件是在数据源上,而不是在网格上。你发布的文档的问题是,这是一篇很长的a-z如何操作的文章。我真的很想找到一个事件api文档。。这似乎是一个不可能完成的任务,实际上数据绑定仍然发生得太快。它发生在取回集合的同时,但在呈现内容之前。我知道这一点,因为我调用了一些选择渲染元素的javascript。。我将发布一个samples,这是一个有趣的奖励,当我添加dataBound:function(e)定义时,仅使用console.debug行,我的整个网格头将下降到网格的底部!嗯,这显然不应该发生。不幸的是,如果没有问题的演示,就无能为力