Open a new page in radwindow

4 posts, 0 answers
  1. Henry
    Henry avatar
    44 posts
    Member since:
    Feb 2013

    Posted 23 Jul 2013 Link to this post

    Hello guys

    There is a radbutton inside the content template of the radwindow control. On clicking that button, I displayed a confirmation asking the user whether he need to leave the page and all data will be lost. If the user click yes means, I want to open a new page in the same radwindow. I dont want the window to be closed and again open the desired page which I have already tried. Any alternative?

    Thanks & Regards
    Henry.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Jul 2013 Link to this post

    Hi Henry,

    Telerik RadWindow offers two modes for loading the content inside - ContentTemplate and NavigateUrl. When the ContentTemplate is used the RadWindow acts as an INaming container on the page and the controls inside are still a part of the page. When the NavigateUrl is set the RadWindow loads the external page in an iframe, which creates a separate document. So if you are having a RadWindow with a ContentTemplate in the mark-up, the NavigateUrl has no effect even if you set it from JavaScript. Please have a look at the following code I tried in which there are two divs inside the ContentTemplate. Inside the first div, I have placed all the controls which should be rendered like the ContentTemplate on the first load of RadWindow (second div will be hidden), then inside the second div I have placed an Iframe which is used to display the desired page or a link and on clicking the OK button in RadConfirm, this second div is displayed and the first div is hidden.

    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="openRadWindow"
        Text="Open RadWindow">
    </telerik:RadButton>
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
        <Windows>
            <telerik:RadWindow ID="RadWindow1" runat="server" Width="700px" Height="500px">
                <ContentTemplate>
                    <div id="div1" style="padding: 40px 10px 20px 30px; width: 100%;">
                        <telerik:RadTextBox ID="RadTextBox1" runat="server" EmptyMessage="Your Name">
                        </telerik:RadTextBox>
                        <br />
                        <br />
                        <telerik:RadTextBox ID="RadTextBox2" runat="server" EmptyMessage="Your Email-ID">
                        </telerik:RadTextBox>
                        <br />
                        <br />
                        <telerik:RadTextBox ID="RadTextBox3" runat="server" EmptyMessage="Your Contact Number">
                        </telerik:RadTextBox>
                        <br />
                        <br />
                        <telerik:RadButton ID="RadButton2" runat="server" Text="Save">
                        </telerik:RadButton>
                        <telerik:RadButton ID="RadButton3" runat="server" Text="Cancel" AutoPostBack="false"
                            OnClientClicked="openNewPage">
                        </telerik:RadButton>
                    </div>
                    <div id="div2" style="display: none;">
                        <iframe runat="server" id="iframe1"></iframe>
                    </div>
                </ContentTemplate>
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>

    JavaScript:
    <script type="text/javascript">
        function openRadWindow(sender, args) {
            var radwindow1 = $find('<%=RadWindow1.ClientID %>');
            radwindow1.show();
        }
     
        function openNewPage(sender, args) {
            radconfirm("Are you sure you want to leave this page?", callback);
        }
        function callback(arg) {
            if (arg == true) {
                var radwindow1 = $find('<%=RadWindow1.ClientID %>');
                radwindow1._contentElement.children.div1.style.display = "none";
                radwindow1._contentElement.children.div2.style.display = "block";
                radwindow1._contentElement.children.div2.children.RadWindow1_C_iframe1.width = radwindow1._width;
                radwindow1._contentElement.children.div2.children.RadWindow1_C_iframe1.height = radwindow1._height;
                radwindow1._contentElement.children.div2.children.RadWindow1_C_iframe1.src = "http://www.telerik.com";
            }
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henry
    Henry avatar
    44 posts
    Member since:
    Feb 2013

    Posted 25 Jul 2013 Link to this post

    Great shinu. Can you explain how those modes differ and more about it?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Jul 2013 Link to this post

    Hi Henry,

    Please have a look at this demo which describes the difference between the two modes of RadWindow.

    Thanks,
    Shinu.
Back to Top