I have a Drag Drop operation that works OK except that it causes a Javascript error.
I am dragging a row of a RadGrid onto a Tree control (not a RadTree). When I do the drop onto the Tree control, the RadGrid's onRowDropping handler fires and does:
args.set_cancel(true);
(otherwise I get a different JScript error: Specified argument was out of the range of valid values. Parameter name: ItemHierarchicalIndex)
Dropping the item onto the Tree control causes the Tree to do an asynchronous callback which executes as I want, and in a subsequent PageLoad I rebind the RadGrid. But shortly afterwards I get a JScript error message from the following Telerik function:
function WebForm_CallbackComplete() {
for (i = 0; i < __pendingCallbacks.length; i++) {
callbackObject = __pendingCallbacks[i];
if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
WebForm_ExecuteCallback(callbackObject);
if (!__pendingCallbacks[i].async) {
__synchronousCallBackIndex = -1;
}
__pendingCallbacks[i] = null;
var callbackFrameID = "__CALLBACKFRAME" + i;
var xmlRequestFrame = document.getElementById(callbackFrameID);
if (xmlRequestFrame) {
xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
}
}
}
}
In this function, the line:
if (!__pendingCallbacks[i].async) {
is giving an error message because i = 0 and __pendingCallbacks[0] is null, so of course __pendingCallbacks[0].async "is null or not an object".
I don't understand all the details of this function (presumably the call to WebForm_ExecuteCallback(callbackObject) has somehow set __pendingCallbacks[i] to null?), but it looks to me as if the error could be avoided by simply replacing that line of code by:
if (__pendingCallbacks[i] && !__pendingCallbacks[i].async) {
Does this look reasonable and if so how can I best make the change?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Telerik Testing</title>
<style type="text/css">
body
{
background: gray;
}
#mainContainer
{
margin: 0 auto;
width: 600px;
background: #fff;
height: 400px;
padding: 10px;
position: relative;
}
#content
{
float: left;
width: 200px;
height: 300px;
border: 2px dotted green;
}
#content {
margin:10px;
padding:3px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="rsm" runat="server">
</telerik:RadScriptManager>
<div id="mainContainer">
<h1>
Telerik Tooltip Test with margin 0 auto</h1>
<div id="content">
this is a test for tooltip. this is a test for tooltip. this is a test for tooltip. this is a test for
tooltip.
</div>
<div>
main content of the site goes here. main content of the site goes here. main content of the site goes
here. main content of the site goes here. main content of the site goes here. main content of the site
goes here. main content of the site goes here. main content of the site goes here. main content of the
site goes here. main content of the site goes here. main content of the site goes here. main content
of the site goes here. main content of the site goes here. main content of the site goes here. main
content of the site goes here. main content of the site goes here. main content of the site goes here.
main content of the site goes here. main content of the site goes here. main content of the site goes
here.
</div>
<telerik:RadToolTip ID="rtt" runat="server" TargetControlID="content" IsClientID="true" RelativeTo="Element"
Position="MiddleRight">
this is the content of the tooltip.
</telerik:RadToolTip>
</div>
</form>
</body>
</html>