How to detect that grid rows have been created in a Kendo UI Grid?

Viewed 8073

I'm working with a Kendo UI Grid object (Javascript version) that gets loaded from an async call. Rows are created from row templates which define a number of buttons for each row - these are pure HTML INPUT elements - all code handling them is in separate Javascript files.

When the grid is created (that is all TR elements have been created in the DOM by the Grid control) I need to run through all the rows and attach event handlers to the various buttons and update a number of their properties. My problem is that I can't figure out when the DOM elements (the TR-s) are created by the grid. I tried using the dataBound event which is fired but the grid DOM isn't created yet - only the response data can be manipulated. I also tried the detailInit event but that's not fired (I'm not much surprised - the grid has no detail items).

I found this Telerik forum where a Telerik rep suggests using setTimeout() to poll if the elements exist in the DOM. I find it hard to believe that this questionable solution is the only approach to something that should be build into the grid as a callback.

So my question is, is there a reliable way to detect when the grid DOM is ready after a refresh? Or, alternatively, is there a way to detect as each TR element is created (one by one)?

Edit

Added code:

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 Answers
Related