args.get_eventTargetElement() in OnRequestStart event returns null when Paging the Grid initiates an AjaxRequest via AjaxManager
How do I determine if the event target is a RadGrid?
The following code leads to a JavaScript error
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnRequestStart="requestStart">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
JavaScript
function requestStart(sender, args) {
var target = args.get_eventTargetElement();
if (target.className.indexOf("RadGrid") > -1) {
// RadGrid control
}
}
I have a RadGrid with several thousand elements on it. In attempting to improve performance, the Visual Studio profiler informed me that it spent more than half of the request in PopulatePlainPanels checking whether something was in a list. (see attached before.png) I changed the type of the variable plainPanelsClientIDs in RadAjaxControl.cs to be a HashSet<string> instead of a List<string>. As a knock-on effect, I had to import System.Linq into RadAjaxManager.cs to get the .toArray() call to work. The result in the attached after.png shows the percentage of execution time dropped from 55% to 3%. I'd appreciate it if the team would evaluate this change for inclusion in future releases. Note 1: I have not done extensive testing on this, so I don't know what might break. The variable isn't referenced much, so the only thing I'm suspicious of is reflection, which I didn't check for and don't expect. Note 2: If importing Linq is undesirable, a more manual conversion to an array can be done pretty easily. Note 3: plainPanelsClientIDs is .add() 'ed to in two places, and both check for membership before being called. This shouldn't be necessary for a HashSet, which simply doesn't add if it's there. This seems a very minor improvement, but I didn't actually try it yet.
Attached is a reproduction project page with a <script> containing a workaround.
Reproduction steps:
1) Run the page
2) Hover quickly between the two colored squares (do this up to 15-20 seconds)
3) Observe the error in the browser's console:
Uncaught RangeError: Maximum call stack size exceeded
at Function.Array.addRange
at Telerik.Web.UI.RadAjaxManager._executePendingRequest
at Object._endRequest
at Array.<anonymous>
at Sys.WebForms.PageRequestManager._endPostBack
at Sys.WebForms.PageRequestManager._scriptsLoadComplete
at Sys.WebForms.PageRequestManager.<anonymous>
at Sys._ScriptLoader._loadScriptsInternal
Workaround: Place/load this script somewhere after the ScriptManager of the page
<script>
Telerik.Web.UI.RadAjaxControl.prototype._executePendingRequest = function () {
var pendingRequest = Array.dequeue(this._requestQueue);
var eventTarget = pendingRequest[0];
var eventArgument = pendingRequest[1];
if (this._requestQueue.length > 0 && this.__id != "") {
var currentAjaxControl = $find(this.__id);
if (currentAjaxControl) {
Array.addRange(currentAjaxControl._requestQueue, this._requestQueue);
// optional, uncomment if issue persists
//if (currentAjaxControl._requestQueue.length > currentAjaxControl._requestQueueSize) {
// // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice#parameters
// // using negative index for start to get the last N elements
// currentAjaxControl._requestQueue =
// currentAjaxControl._requestQueue.slice(-currentAjaxControl._requestQueueSize)
//}
}
}
var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager._doPostBack(eventTarget, eventArgument);
}
</script>
Based on feedback received from our customer, we can further improve our TypeScript definitions - the main concern is that there are still missing methods and incorrect signatures.