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