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 : "/...",
            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 );

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./...",
            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 );

• javascript
• kendo-ui
• kendo-grid

• Can you add the code with the async call and the grid creation to your question? – EfrainReyes Commented Dec 30, 2013 at 19:47
• 1 as far as I can see, the DataBound event is triggered after updating the DOM; there is a DataBinding event which is triggered before the DOM is changed; how do you determine that the DOM isn't ready in dataBound? – Lars Höppner Commented Dec 30, 2013 at 20:35
• @LarsHöppner You're right - the DOM is ready. I got misled by none of the new DOM elements being visible. <facepalm /> I had a bug in the code and in the debugger it failed to pick up the items. – xxbbcc Commented Dec 30, 2013 at 20:38

1 Answer 1

According to the kendo documentation

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

The data source uses jQuery.ajax to make a HTTP request to the remote service. The value configured via transport.read is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.read except the success and error callback functions which are used by the transport.

So you could add a plete callback function to the dataSource's transport.read function, like this:

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