Move RadAjaxPanel via JavaScript

[Jonathan Hunter]

I'm trying to move a RadAjaxPanel to another element via JavaScript and while I'm able to move it around, I've noticed that once you move the RadAjaxPanel using its ClientID property (RadAjaxPanel1.ClientID) the CallBack functionality disappears and anything within it causes a PostBack.

I tooled around with the sourcecode of a rendered page and I noticed that the RadAjaxPanel wraps itself in another div, so if I get the parentNode and move it the CallBack functionality is retained. The issue here is that as soon as I select something, everything within the panel resets back to default.

Here is the relevant part of the JavaScript I'm using:

var ModalBox = new function()
{
    this._PreviousParentID = null;
    this._PreviousContentID = null;

    this.DisplayAjaxContents = function(id)
    {
        this.TakeContent(document.getElementById(id).parentNode.id);
    }; // DisplayAjaxContents(id)
    this.TakeContent = function(id)
    {
        ModalBox._PreviousContentID = id;
        ModalBox._PreviousParentID = document.getElementById(id).parentNode.id;
        var c = ModalBox.GetModalContentObject();
        c.appendChild(document.getElementById(id).parentNode.removeChild(document.getElementById(id)));
    }; // TakeContent(id)
    this.ReplaceContent = function()
    {
        var c = ModalBox.GetModalContentObject();
        var pp = document.getElementById(ModalBox._PreviousParentID);
        pp.appendChild(c.removeChild(document.getElementById(ModalBox._PreviousContentID)));
        ModalBox._PreviousParentID = null;
        ModalBox._PreviousContentID = null;
    }; // ReplaceContent()
};

(Note: I've also tried using element.cloneNode(true) to transfer the RadAjaxPanel, but the result is the same--callback is maintained but it just resets itself.)

The ascx control has this:

<div>I am currently <asp:HyperLink ID="hlStatus" runat="server" />.</div>
<div id="SingleSignInOut_Self_Hidden" style="display: none;">
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <table style="width: 100%;">
            <tr>
                <td style="width: 30%;"><b>Status</b></td>
                <td style="width: 30%;"><b>Reason</b></td>
                <td style="width: 40%;"><b>Details</b></td>
            </tr>
            <tr>
                <td>
                    <asp:RadioButtonList ID="rblStatus" runat="server" AutoPostBack="true" OnSelectedIndexChanged="Status_Select">
                        <asp:ListItem Text=" In" Value="1" />
                        <asp:ListItem Text=" Out" Value="2" />
                        <asp:ListItem Text=" Extended" Value="3" />
                    </asp:RadioButtonList>
                </td>
                <td>
                    <asp:RadioButtonList ID="rblReason" runat="server" />
                </td>
                <td>

                </td>
            </tr>
        </table>
    </telerik:RadAjaxPanel>
</div>

The ascx codebehind has:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) { Load_Vars(); }
    }
    protected void Load_Vars()
    {
        hlStatus.NavigateUrl = "javascript:void(ModalBox.DisplayAjaxContents('" + RadAjaxPanel1.ClientID + "'));";
        hlStatus.Text = "signed out";
    }

    protected void Status_Select(object sender, EventArgs e)
    {

    }

Anyone have any suggestions?

[Tsvetoslav]

Hi Jonathan,

Such a scenario is not supported by the RadAjaxPanel control or rather by the Ajax framework as it is bound to fail with the MS UpdatePanel as well.

All the best,
Tsvetoslav
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.