AjaxRequestWithTarget targeting RadDockZone not firing

[Sean]

Hi,

I am trying to 'move' a postback event from a RadListBox to a RadDockZone. My reasoning for this is that the user is drag-and-dropping an item onto the screen. The 'interesting' object is where the item is being dropped, not where it came from. As such, I am trying to stop the postback on the listbox and move it to the dockzone dropped upon.

function OnClientDropping(sender, eventArgs) {
    eventArgs.set_cancel(true);
    sender.clearSelection();
    var droppedID = eventArgs.get_htmlElement().id;
    var listBoxID = sender.get_id();
    var sourceItem = eventArgs.get_sourceItem();
    var sourceItemText = sourceItem.get_text();
    var sourceItemValue = sourceItem.get_value();
    $find(ajaxManagerID).ajaxRequestWithTarget(droppedID, "Test");
}

I cancel the dropping event from the radlistbox, and then attempting to move the request to the dockzone.

Now, I have overriden Page's RaisePostBackEvent to ensure that the event is indeed posting. It is, and it has the UniqueID of the dockZone. Nevertheless, I do not see the RaisePostBackEvent event firing on my RadDockZone (I have my own class of RadDockZone which implements IPostBackEventHandler). Any thoughts on why? I haven't wired up an event to it (could use a suggestion as to which is best), but was just trying to make sure it got there.

EDIT: So I've gone about this a different way. I'm still not entirely happy with my implementation, so I would love to hear Telerik's input, but here is what I've got:

Client-Side Javascript Necessary:

function OnClientDropping(sender, eventArgs) {
    eventArgs.set_cancel(true);
    sender.clearSelection();
    previousZone = null;

    var sourceItem = eventArgs.get_sourceItem();
    var droppedID = eventArgs.get_htmlElement().id;

    if (droppedID.indexOf("RadDockZone") != -1) {
        if ($find(droppedID).get_docks().length == 0) {
            dockZoneDroppedOnID = droppedID;

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

            $find(ajaxManagerID).ajaxRequestWithTarget(droppedID, $.toJSON(eventData));
        }
    }
    else {
        dockZoneDroppedOnID = "";
    }
}

var dockZoneDroppedOnID = "";
//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);

function initializeRequest(sender, eventArgs) {
    loadingPanel = $find(radAjaxLoadingPanel1ID);
    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 = "";
    }
    loadingPanel.show(postBackElement);
}

function endRequest(sender, eventArgs) {
    loadingPanel = $find(radAjaxLoadingPanel1ID);
    loadingPanel.hide(postBackElement);
}

Server-Side Code:

protected void Page_Load(object sender, EventArgs e)
{
    Logger.Info("Page Load");
    RegenerationManager.Instance.RegenerateDockContents();

    if (IsPostBack)
    {
        string eventTarget = Request.Params.Get("__EVENTTARGET");

        if (eventTarget.Contains("DockZone"))
        {
            CreationManager.ProcessDragAndDrop(eventTarget, Request.Params.Get("__EVENTARGUMENT"));
        }
    }
}

From here, I detect that an event was targeting my DockZone.

The structure of my controls is like so:

<cc1:CormantRadPane ID="RadPane1" Runat="server">
    <nStuff:StyledUpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional" CssClass="maxHeight" >
        <ContentTemplate>
            <cc1:CormantRadSplitter ID="RadSplitter1" runat="server" Visible="false"/>
            <cc1:CormantRadDockZone ID="RadDockZone1" runat="server" />
       </ContentTemplate>
    </nStuff:StyledUpdatePanel>
</cc1:CormantRadPane>

CreationManager handles the processing of the JSON I passed back, and adds a dock to the dockZone. Since I targeted the dockZone with the update, the UpdatePanel wrapping the dockZone refreshes the area and everything seems to work pretty well.

I'm not so keen on how I parse out the information. Would love a suggestion on how to do it better -- I thought I could do it by implementing IPostBackEventHandler in my class which inherits from RadDockZone, but I have been unsuccessful so far.

EDIT2: Mission....SUCCESSFUL!

To all who are trying to do this: (This is a lot more relevant if you're working underneath a master page)

RadControls expose the client-side method .get_id(). This method returns (at least for me!) the ClientID of the object. In creating my controls I do not set the ClientID, however, so it may act differently if you have.

It is structured something like this: "ctl00_MainContent_RadDock_GUIDHERE"

This is NOT the uniqueID of the control, but it is close. In order for the PostBackEvent of a WebControl to respond it needs to match the unique ID of the control.

I did so like this:

var splitterClientID = pane.get_splitter().get_id();

var indexOfID = splitterClientID.indexOf("RadSplitter");

var uniqueID = splitterClientID.substr(0, indexOfID).replace(/_/g, "$");

var splitterID = splitterClientID.substr(indexOfID);

USEFUL ID: uniqueID.concat(splitterID) -- this rebuilds our old string with underscores replaced
with cash symbols, but will NOT replace any undescores following the control ID declaration.
e.g. saying ctl00_MainContent_RadSplitter_ABC will transform into ctl00$MainContent$RadSplitter_ABC

After making this change I was able to successfully implement IPostBackEventHandler.

Telerik: It'd be sweet if you could expose a client-side method that returns the uniqueID of the control. It is really difficult to get a handle on this for DYNAMICALLY created controls. It is easier when all the controls are known -- you can just use "<%= MyControl.UniqueID %>" but this isn't an acceptable solution for all implementations..

Thanks,

Sean

[Pero]

Hello Sean,

I think the RaisePostBackEvent is not fired on the RadDockZone, because you are not passing the UniqueID of the zone to the AjaxManager's method that initiates the call to the server. Please make sure the UniqueID is passed and see if the method in question will be called.
I am using the following code to perform a postback, and the zone's RaisePostBackEvent method gets called:

<%@ Register TagPrefix="telerikX" Namespace="Zones" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="RadScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
        function Click()
        {
            __doPostBack("Zone1", "111");
        }
    </script>
    <div>
        <input type="button" onclick="Click(); return false;" value="Postback" />
    </div>
    <telerikX:Zone id="Zone1" runat="server" Height="400px">
    </telerikX:Zone>
    </form>
</body>
</html>

using Telerik.Web.UI;
using System.Web.UI;
using System;
namespace Zones
{
    public class Zone : RadDockZone, IPostBackEventHandler
    {

        #region IPostBackEventHandler Members

        public void RaisePostBackEvent(string eventArgument)
        {
            Page.Title = DateTime.Now.ToString();
        }

        #endregion
    }
}

Best wishes,
Pero
the Telerik team

[Sean]

Hey Pero,

I snuck an edit in right before you, but I was successful! Could you comment on the possibility of being able to expose UniqueID for dynamically created RadControls? Wouldn't think it's that hard considering I was able to derive it with a string replace, but maybe there's more to it than I know :)

Sean

[Pero]

Hello Sean,

The UniqueID property can be easily passed from the server to the client in a derived class from a RadControl. Two things need to be done:

1. Override the DescribeComponent method and add the desired uniqueID property

using Telerik.Web.UI;
/// <summary>
/// Summary description for RadDockZoneCustom
/// </summary>
namespace CustomNamespace
{
    public class RadDockZoneCustom : RadDockZone
    {
        protected override void DescribeComponent(IScriptDescriptor descriptor)
        {
            descriptor.AddScriptProperty("_uniqueID", "\"" + UniqueID + "\"");
            base.DescribeComponent(descriptor);
        }
    }
}

2. Define the field on the client:

<asp:ScriptManager ID="RadScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
    Telerik.Web.UI.RadDockZone.prototype._uniqueID = null;
</script>

After this is done the property can be easily accessed in the following way:

<script type="text/javascript">
    function getUniqueID()
    {
        var zone = $find("RadDockZone1");
        alert(zone._uniqueID);
    }
</script>

All the best,
Pero
the Telerik team