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

4 posts, 1 answers
  1. Drew
    Drew avatar
    4 posts
    Member since:
    Jun 2012

    Posted 15 Jun 2012 Link to this post

    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
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    5706 posts

    Posted 18 Jun 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Drew
    Drew avatar
    4 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    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
  4. Drew
    Drew avatar
    4 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    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.  
Back to Top