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 );
According to the kendo documentation
http://docs.kendoui.com/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 complete
callback function to the dataSource's transport.read
function, like this:
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
}
}
}
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With