如何检测在Kendo UI Grid中创建的网格行?

时间:2013-12-30 19:41:44

标签: javascript kendo-ui kendo-grid

我正在处理从异步调用加载的Kendo UI Grid对象(Javascript版本)。行是从行模板创建的,它们为每行定义了许多按钮 - 这些是纯HTML INPUT元素 - 处理它们的所有代码都在单独的Javascript文件中。

创建网格时(即TR控件在DOM中创建了所有Grid个元素)我需要遍历所有行并将事件处理程序附加到各个按钮和更新他们的一些属性。我的问题是我无法弄清楚DOM元素(TR - s)何时由网格创建。我尝试使用被触发的dataBound事件,但尚未创建网格DOM - 只能处理响应数据。我也尝试了detailInit事件,但是没有被解雇(我并不感到惊讶 - 网格没有细节项目。)

我找到this Telerik forum,其中Telerik代表建议使用setTimeout()来轮询DOM中是否存在元素。我发现很难相信这个有问题的解决方案是应该作为回调构建到网格中的唯一方法。

所以我的问题是,是否有一种可靠的方法可以检测刷新后网格DOM何时就绪?或者,有没有办法检测每个TR元素是否被创建(逐个)?

修改

添加了代码:

var oDataSource =
{
    type : "odata",
    error : function ( oEvent )
    {
        // show error
    },
    transport :
    {
        read :
        {
            url : "http://url.com/...",
            dataType : "json"
        }
    },
    schema :
    {
        data : function ( oData )
        {
            return ( oData["value"] );
        },
        total : function ( oData )
        {
            return ( oData["odata.count"] );
        },
        model :
        {
            fields :
            {
                /* Model definition */
            }
        },
        pageSize : 15,
        serverPaging : true,
        serverFiltering : true,
        serverSorting : true
    }
};

var oGridSettings =
{
    dataSource : oDataSource,
    rowTemplate : kendo.template ( $( "#detail-row-template" ).html () ),
    sortable : true,
    pageable : true,
    columns :
    [
        /* Column definitions */
    ]
};

oDiv.kendoGrid ( oGridSettings );

1 个答案:

答案 0 :(得分:6)

根据kendo文档

http://docs.kendoui.com/api/framework/datasource#configuration-transport.read

  

数据源使用jQuery.ajax向远程发出HTTP请求   服务。通过transport.read配置的值传递给   jQuery.ajax。这意味着您可以设置所有支持的选项   jQuery.ajax通过transport.read除了成功和错误回调   运输使用的功能。

因此,您可以向dataSource的complete函数添加transport.read回调函数,如下所示:

transport :
{
    read :
    {
        url : "http://url.com/...",
        dataType : "json",
        complete: function(data, status) {
            if (status === "success") {
                // your code that will be executed once the request is done
            }
        }
    }
},