[Solved] Not sure if this is possible. Obtain handle on sender id during endRequest event.

[Sean]

Hi Telerik,

I am attempting to make the follow scenario look visually more appealing to the end user:

-- User drag-and-drops a control onto the page. This starts a postback, I manually place a loading panel over the proper area.
-- User drag-and-drops a second control onto the page before the first postback has finished. I do not wish to cancel the firstpostback, I queue up the second postback and listen in the endRequest event.

Now, I would like to display a loading panel over both of these elements. I can do that perfectly fine. The problem lies in the fact that I cannot get a handle on whose request is ending inside of the endRequest method.

var dockZoneDroppedOnID = "";
var displayOverBaseID = "";
//Handles drawing the LoadingPanels over the correct elements when callbacks are occurring.
var loadingPanel = "";
var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
var postBackElement = "";
pageRequestManager.add_initializeRequest(initializeRequest);
pageRequestManager.add_endRequest(endRequest);

//This will display a loading panel over a control. It's useful to change what the loading panel is being
//displayed over in some scenarios because it just doesn't look quite right. e.g. when moving between panels
//the loading panel should only be the size of the pane that the dock is moving to, not the full size of the dock currently.
function initializeRequest(sender, eventArgs) {
    loadingPanel = $find(radAjaxLoadingPanel1ID);
    loadingPanel.hide(postBackElement);
    postBackElement = eventArgs.get_postBackElement().id;

    //When drag and dropping the 'interesting' control isn't where we're coming from but where we're going to.
    if (dockZoneDroppedOnID != "") {
        postBackElement = $find(dockZoneDroppedOnID).get_parent().get_id();
        dockZoneDroppedOnID = "";
    }
    else if (displayOverBaseID != "") {
        postBackElement = displayOverBaseID;
        displayOverBaseID = "";
    }

    loadingPanel.show(postBackElement);
}

//This will hide the loading panel thats currently being displayed and,
//if the user decided to continue dropping things onto the page, it will fire
//the next event.
function endRequest(sender, eventArgs) {
    loadingPanel = $find(radAjaxLoadingPanel1ID);
    loadingPanel.hide(postBackElement);

    if (droppedItemQueue.length > 0) {
        droppedItemQueue.shift(); //Remove the ID of the control we just finished.
        droppedItemQueue.shift(); //Remove the data for the control we just finished.
    }

    //If we've got more ajax requests queued up.
    while (droppedItemQueue.length > 0) {
        var uniqueDockZoneID = droppedItemQueue.shift();
        var data = droppedItemQueue.shift();
        $find(radAjaxManagerID).ajaxRequestWithTarget(uniqueDockZoneID, $.toJSON(data));
    }

    if( resizeQueue.length > 0) {
        resizeQueue.shift(); //Remove the ID of the control we just finished.
    }

    while (resizeQueue.length > 0) {
        var resizedID = resizeQueue.shift();
        $find(radAjaxManagerID).ajaxRequestWithTarget(resizedID);
    }
}

What this currently does is hide any visible loading panel on the screen before drawing a new one. I would like to keep a list of currently displayed loading panels, then, in end request, hide the appropriate loading panel. Is it possible to do this? All the examples I see just keep a single global variable and hide it in endRequest -- which will not work for my situation.

Thanks

Sean

[Maria Ilieva]

Hello Sean,

In this case you could check which is the Ajax event target element and hide the corresponding LoadingPanel in the ResponseEnd event. For example:

<script type="text/javascript">
function ResponseEnd()

{
    if (eventArgs.EventTarget == "<%=RadButton1.UniqueID %>")
    {
     .
     .
     .
    }
}
</script>

I hope this helps.

Greetings,
Maria Ilieva
the Telerik team

[Sean]

Hey Maria,

So, I set up a ResponseEnd event, and inside of my RadAjaxManager I added  <ClientEvents OnResponseEnd="ResponseEnd" />

so, the setup now is:

<telerik:RadAjaxManager ID="RadAjaxManager1" Runat="Server" RequestQueueSize="5">
     <ClientEvents OnResponseEnd="ResponseEnd" />
 </telerik:RadAjaxManager>

function ResponseEnd(sender, eventArgs) {
    alert(eventArgs.TargetElement);
}

My alert never fires. I'm suspecting that this is because the 'ajaxified' controls aren't specified in the AjaxManager. Doing this will not work for my scenario -- I need conditional update panels.

Is my assumption correct? Work arounds?

Cheers,

Sean

[Maria Ilieva]

Hello Sean,

In this case could you please elaborate how the controls are ajaxified to perform ajax requests instead of regular postbacks. What are th ajax settings you have on the page. The ResponseEnd event will fire any time a control ajaxified with RadAjaxManager perform a callback. Some more information on how the controls are ajaxified will help us provide more to-the-point answer.

Regards,
Maria Ilieva
the Telerik team

[Sean]

Hello Maria,

Well, here is the code which is responsible for starting a post back on the page. I am allowing the user to drag-and-drop a RadListBoxItem from the RadListBox onto the page. When they drag-and-drop over a DockZone I respond appropriately. The RadAjaxManager does not wrap the control in an update panel. Instead, I have it wrapped in my own update panel which has UpdateMode = Conditional. This is called after working with the control. All of this code works as expected. I just never see the alert inside of OnResponseEnd. 

Uhm, I do have ViewState disabled. Shouldn't matter, though..

//The queue is here to prevent the erroneous state where user drops a control while an AJAX request is in-progress.
//Queue up the next event instead of breaking.
var droppedItemQueue = new Array();

//When the user drops a RadListBoxItem onto the dashboard we have to figure out
//what RadDockZone the control was dropped onto, rip out information about the event,
//and then pass that data to the server for processing.
function OnClientDropping(sender, eventArgs) {
    eventArgs.set_cancel(true);
    sender.clearSelection();
    previousZone = null;

    var sourceItem = eventArgs.get_sourceItem();
    var droppedObject = $find(eventArgs.get_htmlElement().id);

    if (droppedObject && Telerik.Web.UI.RadDockZone.isInstanceOfType(droppedObject)) {
        if (droppedObject.get_docks().length == 0) {
            //Needed to maintain proper visual display of loading panels.
            dockZoneDroppedOnID = droppedObject.get_id();

            var eventData = {};
            eventData["sourceItemText"] = sourceItem.get_text();
            eventData["sourceItemValue"] = sourceItem.get_value();

            if (sender.get_id().indexOf("Historical") != -1) {
                eventData["reportType"] = "HistoricalReport";
            } else if( sender.get_id().indexOf("Custom") != -1) {
                eventData["reportType"] = "CustomReport";
            }
            else {
                eventData["reportType"] = "None";
            }

            if (droppedItemQueue.length == 0) {
                droppedItemQueue.push(droppedObject._uniqueID);
                droppedItemQueue.push(eventData);
                $find(radAjaxManagerID).ajaxRequestWithTarget(droppedObject._uniqueID, $.toJSON(eventData));
            }
            else {
                droppedItemQueue.push(droppedObject._uniqueID);
                droppedItemQueue.push(eventData);
            }
        }
    }
    else {
        dockZoneDroppedOnID = "";
    }
}

/// <summary>

/// Whenever the user drag-and-drops a control onto the page

/// this event fires from __doPostBack targeting the UniqueID of

/// this control. At that point we're given some json in the eventArgument

/// which is needed to determine how to process the event.

/// </summary>

/// <param name="eventArgument"></param>

public void RaisePostBackEvent(string eventArgument)

{

    //TODO: Try parsing into droppedItem. If fail, don't call future methods.

    ProcessDragAndDrop(eventArgument);

}


[Maria Ilieva]

Hi Sean,

We uses the PageRequestManager  endRequest event to fire the ResponseEnd event of the RadAjaxManager. However note that this event will fire only when the controls which triggers the ajax are ajaxified with RadAjaxManager. If you are using asp UpdatePanel the mentioned event will not fire.
In this case you should use directly the PageRequestManager endRequest event and its eventArgs to get the needed information.

Greetings,
Maria Ilieva
the Telerik team