Adding OnRequestStart handler using javascript

[Chris Dalessandri]

Is there a way to add the OnRequestStart handler using javascript?  It seems most of the Telerik controls have this functionality for their client-side events but I cannot find any documentation for this case.

I want to add the handler in javascript because I want to scope the handler to my object.

I have tried to accomplish this in code behind with an anonymous wrapper function, something like this:

RadAjaxManager.GetCurrent(Page).ClientEvents.OnRequestStart = "function() {myObject.handler.apply(myObject, arguments);}";

But this either chokes on parsing or ajax ceases to work but throws no error.

Any help would be much appreciated.

Thanks.

Chris

[Sebastian]

Hello Chris,

You need to use the following syntax for the OnRequestStart handler when defined from the code-behind:

RadAjaxManager.GetCurrent(Page).ClientEvents.OnRequestStart = "(function() {myObject.handler.apply(myObject, arguments);})()";

Thus the anonymous function should be executed when the ajax request is initiated. I am posting the code from a simple demo I tested locally which worked as expected:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Label1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:Button ID="Button1" runat="server" Text="Get current date" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" />

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToLongDateString();
}
protected void Page_Load(object sender, EventArgs e)
{
    RadAjaxManager1.ClientEvents.OnRequestStart = "(function(){ debugger; alert('Request start!');})()";
}

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Chris Dalessandri]

Thank you for the idea.  It did not occur to me to execute a function expression.  Since the usual method for assigning a handler is to pass it a function name (pointer), I assumed that is what was expected.

However, there does seem to be a problem with this method because I need access to the EventArgs, so I can cancel the ajax if I need to.

From your suggested solution:

RadAjaxManager.GetCurrent(Page).ClientEvents.OnRequestStart = "(function() {myObject.handler.apply(myObject, arguments);})()";

It seems that you are evaling my 'handler' when an ajax request starts.  In that case, what I really need is more like:

RadAjaxManager.GetCurrent(Page).ClientEvents.OnRequestStart = "(function(sender, eventArgs) {myObject.handler.apply(myObject, arguments);})(actualInScopeSenderObject, actualInScopeEventArgsObject)";

Even if this could be done, it seems like a solution that would eventually break since I would be making assumptions about the internals of Telerik code.

Can you think of any way around this issue? 

As an aside, I think it would be great if Telerik would start providing client-side handlers that have a scope parameter.  The examples in your documentation generally show event handlers placed on the global object, and so scoping doesn't seem useful.  But using global handlers is very bad practice and names will eventually clash in complicated scenarios.  And having 'this' point to a dom object or a Telerik object doesn't make any sense when the handler resides on my object.

Thanks so much for your help.

Chris

[Sebastian]

Hello Chris,

Thank you for the additional explanation - I think I see your point more clearly now.

My suggestion would be to modify the PageLoad handler as follows:

protected void Page_Load(object sender, EventArgs e)
{
    RadAjaxManager1.ClientEvents.OnRequestStart = "(function(sender,args){ debugger; alert('Request start!');})(arguments[0],arguments[2])";
}

The idea is to pass the first and third elements of the arguments array to your anonymous function which will represent the RadAjaxManager itself and the initiator of the ajax request (Button1) in this case.

I will forward your feedback about the scope parameters to our developers for further consideration. However, I should inform you that such change may introduce backwards incompatibility with previous versions of our controls and that is why I am not able to guarantee that the proposed modification will be included for sure.

Note that our client events handlers follow the general ASP.NET AJAX conventions for global scope and arguments.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Chris Dalessandri]

Thank you for your help.  Your suggestion is a good workaround.  Hopefully in the future, RadAjaxManager will expose a client-side way to add/remove handlers for OnRequestStart.  At least then, I will be able to bind to a context without worrying about the internals of Telerik code.

I realize that Telerik follows ASP.NET conventions, but Microsoft is the worst offender when it comes to polluting global space.  JQuery and YUI, for example, do not do this, by design.  And each of those libraries provides a simple way to bind a handler to a context.  In any sufficiently complex scenario, you cannot use global handlers with confidence.  And in a handler that lives on an object, 'this' must point to the object or life gets very complicated.

Thanks again.

Chris