RadWindow server-side open/close when its content is wrapped in an UpdatePanel (using ContentTemplate)

[Drew]

Hi everyone, 

Short description:  See the code below...  How do I make my RadWindow open and close via AJAX without breaking its ajaxified content? 


Long description:  

I have a RadWindow, an "Open Window" button, and a Literal.  The open button (no AJAX) opens the RadWindow by toggling its VisibleOnPageLoad property*.  

In the RadWindow, which uses ContentTemplate, there is a RadAjaxPanel and a "Close Window" button.  The close button (no AJAX) closes the RadWindow by toggling its VisibleOnPageLoad property*.  

*I do a server-side window open/close because I want to so some other server-side stuff on the button click event.   

The RadAjaxPanel contains a DropDownList and two Panels ("A" and "B").  The dropdown toggles the visibility of the two panels via AJAX.  When the Close button is clicked, the Literal's Text is changed to that of the dropdown's SelectedItem text.  

So, after the page posts...  

I click the Open Window button.  It does a full postback and the RadWindow is displayed.  I change the dropdown from "A" to "B".  It does an async postback, Panel A disappears, Panel B is displayed.  I click the Close button, it does a full postback, the window disappears, and the literal's text is changed to "You selected B".  

Now I want the RadWindow to open and close via AJAX, but all my attempts to get it working with RadAjaxManager have failed.  The technique for server side RadWindow open/close that I've been using breaks the RadWindow's content AJAX (it does a full postback when I change the dropdown).  

How do I make my RadWindow open and close via AJAX without breaking its ajaxified content?

Page markup:  

<telerik:RadScriptManager runat="server" ID="ScriptManager" />
<asp:Button runat="server" ID="OpenButton" OnClick="OpenButton_Click" Text="Open Window" />
<asp:Panel runat="server" ID="OutputPanel">
    <asp:Literal runat="server" ID="OutputLiteral" />
</asp:Panel>
<asp:Panel runat="server" ID="WindowWrapper">
    <telerik:RadWindow runat="server" ID="Window"
            Behaviors="Move,Resize"
            VisibleStatusbar="false">
        <ContentTemplate>
            <telerik:RadAjaxPanel runat="server" ID="WindowContentWrapper" EnableAJAX="true">
                <asp:DropDownList runat="server" ID="TestDropdown" AutoPostBack="true">
                    <asp:ListItem Text="A" Value="A" />
                    <asp:ListItem Text="B" Value="B" />
                    <asp:ListItem Text="A and B" Value="AB" />
                </asp:DropDownList>
                <asp:Panel runat="server" ID="PanelA" Visible="false">
                    You selected A
                </asp:Panel>
                <asp:Panel runat="server" ID="PanelB" Visible="false">
                    You selected B
                </asp:Panel>
            </telerik:RadAjaxPanel>
            <asp:Button runat="server" ID="CloseButton" OnClick="CloseButton_Click" Text="Close Window" />
        </ContentTemplate>
    </telerik:RadWindow>
</asp:Panel>

Page codebehind: 

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    if (!IsPostBack)
    {
        this.TestDropdown.SelectedValue = "A";
    }
}
protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    this.PanelA.Visible = this.TestDropdown.SelectedValue.Contains('A');
    this.PanelB.Visible = this.TestDropdown.SelectedValue.Contains('B');
}
protected void OpenButton_Click(object sender, EventArgs e)
{
    //Do some server-side stuff first
    this.Window.VisibleOnPageLoad = true;
}
protected void CloseButton_Click(object sender, EventArgs e)
{
    this.OutputLiteral.Text = string.Format("You selected {0}", this.TestDropdown.SelectedItem.Text);
    this.Window.VisibleOnPageLoad = false;
}

Thank you

[Marin Bratanov]

Hi Drew,

Have you taken a look at this sticky thread: http://www.telerik.com/community/forums/aspnet-ajax/window/opening-radwindow-from-the-server.aspx? The same approach (calling JavaScript code from the server-side) can be employed to both open and close the RadWindow, you only need to change the show() method with the close() method. This will allow you to place the close button inside the RadAjaxPanel in the ContentTemplate of the RadWindow. I also believe this help article on using the RadWindow with AJAX can shed some light on the way the control works in this case.


All the best,
Marin Bratanov
the Telerik team

[Drew]

Thanks Marin, 

I modified my codebehind to use the Javascript in that example rather than VisibleOnPageLoad, like this:  

protected void OpenButton_Click(object sender, EventArgs e)
{
    //Do some server-side stuff first
    string script = string.Format("function ShowRadWindow() {{ $find(\"{0}\").show(); Sys.Application.remove_load(ShowRadWindow); }} Sys.Application.add_load(ShowRadWindow);",
        this.Window.ClientID);
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ShowRadWindow", script, true);
}
protected void CloseButton_Click(object sender, EventArgs e)
{
    this.OutputLiteral.Text = string.Format("You selected {0}", this.TestDropdown.SelectedItem.Text);
}

It works great but I still do a full postback when I click the Open Window button.  

So, I wrapped it in a RadAjaxPanel like this: 

<telerik:RadAjaxPanel runat="server" ID="AJAXPanel1">
    <asp:Button runat="server" ID="OpenButton" OnClick="OpenButton_Click" Text="Open Window" />
</telerik:RadAjaxPanel>

And it works great.  

But I have one problem, in my production code, the Open Button is actually a command button declared in a RadGrid MasterTableView.CommandItemTemplate, like this: 

<telerik:RadGrid runat="server" ID="MyGrid" ... >
    ...
    <MasterTableView>
        ...
        <CommandItemTemplate>
            ...
            <asp:Button runat="server" ID="OpenButton"
                    CommandName="Open"
                    Text="Open Window" />
            ...
        </CommandItemTemplate>
        ...
    </MasterTableView>
    ...
</telerik:RadGrid>

How do I ajaxify the Open button now?  

Thanks again

[Drew]

Nevermind, I got it working by changing this...

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "ShowRadWindow", script, true);

...to this:

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "ShowRadWindow", script, true);

Thanks again for the nudge, Marin.