Using RadWindow and RadTabStrip - A window is displayed on load & button not passing correct value to page in new window.

3 posts, 1 answers
  1. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 07 Dec 2015 Link to this post

    I have an ASP.Net page I am trying to use the RadWindow and RadTabStrip on.  The ASP.Net page has some RadButtons on it.  Each button is for a different Line.

    I am trying to develop the ASP.net page so that when the user clicks on a button which opens a new window to a different ASP.Net page.

    Here are the problems I am running into:

    - A window is opened upon the page being loaded.  There should not be any window created and opened when the page is loaded.  Only when a button is clicked on that new window appears.

    - In a new window, the ASP.Net page is getting the same value ... BL1.  If a button for BL4 is clicked on then the new window should show BL4 in the ASP.Net page it loaded.

    - For each new window opened, the tabstrip expands causing the buttons to be pushed down further in the page.  The buttons need to stay in the same place no matter how many windows are opened.

    Basically, I am trying to do something similiar to the demo for the RadWindow when you click on the Overview.

    Below is my code.

    Attached is a screenshot of what happens when the page loads.

    Please help me to find a solution to my issues above.  Thanks!

    Sincerely,

    Keith Jackson

    Below is my code.

    TestRadWindow.aspx 

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestRadWindowPage.aspx.vb" Inherits="TestRadWindowPage" %>

    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html .RadMenu .rmLink,
            html .RadMenu .rmHorizontal .rmText {
                float: none;
                padding: 0;
                text-align: center;
            }    
            .restrictionZone {
                height: 967px;
                width:960px;
                border: solid 1px black;
            }
            .RadWindow .rwWindowContent
            {
                background-image: url('images/SteelWallpaper1.jpg') !important;
            }
            .LineDiv1 {
                text-wrap:none;
                width: 740px;
                height: 172px;
                background-color: white;
                box-shadow: 10px 10px 5px #101010;
            }
            .LineDiv2 {
                text-wrap:none;
                text-indent:3px;
                width: 200px;
                height: 172px;
                background-color: white;
                box-shadow: 10px 10px 5px #101010;
            }
        </style>
        <script type="text/javascript" src="/scripts/jquery.min.js"></script>
        <script type = "text/javascript" >
            function tabStrip_load(sender, args) {
                tabStrip = sender;
            } function OnClientTabSelected(sender, args) {
                //get the current windows collection
                var selIndex = tabStrip.get_selectedIndex();
                OpenWindowByIndex(selIndex);
            }

            function OpenWindowByIndex(index) {
                var windows = demo.manager.get_windows();
                for (var i = 0; i < windows.length; i++) {
                    var win = windows[i];
                    if (i == index) {
                        //Only show window if it is not currently visible to prevent recursion of RadWindow OnClientShow calling RadTabStrip OnClientTabSelected 
                        if (!win.isVisible()) {
                            win.show();
                            win.center();
                        }
                    }
                    else {
                        win.hide();
                    }
                }
            }
            function openNewWindow(sWrkctr) {
                //var windowURL = urlTextBox.get_textBoxValue();
                //var oWnd = radopen("CoilUptimeHistory.aspx?WRKCTR=" + sWrkctr, null);
                var oWnd = GetRadWindowManager().open("CoilUptimeHistory.aspx?WRKCTR=" + sWrkctr, null);
                oWnd.center();
                //var websiteName = getWebsiteName(oWnd.get_navigateUrl());
                //Add new tab to the tabstrip
                tabStrip.trackChanges();
                var tab = new Telerik.Web.UI.RadTab();
                tab.set_text(sWrkctr + ' Coil Uptime History');
                tabStrip.get_tabs().add(tab);
                //var iconUrl = oWnd.get_navigateUrl() + "/favicon.ico";
                //if (iconUrl.indexOf("converter.telerik.com") > 0) iconUrl = "codeConverterFavicon.ico";
                //if (iconUrl.indexOf("www.telerik.com") > 0) iconUrl = "telerikFavicon.ico";
                //if (iconUrl.indexOf("www.w3.org") > 0) iconUrl = "w3Favicon.png";
                //tab.set_imageUrl(iconUrl);
                tabStrip.commitChanges();

                //Select this tab
                tab.select();
            }
        </script>
        </head>
    <body style="background-color: #3A4459">
        <form id="form1" runat="server">
              <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                    </asp:ScriptReference>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                    </asp:ScriptReference>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                    </asp:ScriptReference>
                </Scripts>
            </telerik:RadScriptManager>
            <telerik:RadMenu ID="RadMenu1" Runat="server" Width="960px" Style="z-index: 100">
                <Items>
                    <telerik:RadMenuItem runat="server" Font-Bold="True" Font-Size="14pt" NavigateUrl="CustomerPortal" Text="Home" Width="475px">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" IsSeparator="True" Text="Sep">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Font-Bold="True" Font-Size="14pt" ForeColor="Red" Text="Logout" Width="475px">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
            <telerik:RadTabStrip OnClientTabSelected="OnClientTabSelected" ID="RadTabStrip1"
                                 Orientation="VerticalLeft" runat="server" OnClientLoad="tabStrip_load">
            </telerik:RadTabStrip>

            <telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="false">  
            </telerik:RadWindowManager>  
        <br />
        <br />
        <br />
        <telerik:RadButton ID="rbtnBL1OpenRadWin" OnClientClicked="openNewWindow('BL1')" AutoPostBack="false" runat="server" Text="BL1 Open RadWindow" RenderMode="Classic"  Font-Size="11pt">
        </telerik:RadButton>
        <br />
        <br />
        <telerik:RadButton ID="rbtnBL2OpenRadWin" OnClientClicked="openNewWindow('BL2')" AutoPostBack="false" runat="server" Text="BL2 Open RadWindow" RenderMode="Classic"  Font-Size="11pt">
        </telerik:RadButton>
        <br />
        <br />
        <telerik:RadButton ID="rbtnBL3OpenRadWin" OnClientClicked="openNewWindow('BL3')" AutoPostBack="false" runat="server" Text="BL3 Open RadWindow" RenderMode="Classic"  Font-Size="11pt">
        </telerik:RadButton>
        <br />
        <br />
        <telerik:RadButton ID="rbtnBL4OpenRadWin" OnClientClicked="openNewWindow('BL4')" AutoPostBack="false" runat="server" Text="BL4 Open RadWindow" RenderMode="Classic"  Font-Size="11pt">
        </telerik:RadButton>
        <br />
        <br />
        <telerik:RadButton ID="rbtnCTLOpenRadWin" OnClientClicked="openNewWindow('CTL')" AutoPostBack="false" runat="server" Text="CTL Open RadWindow" RenderMode="Classic"  Font-Size="11pt">
        </telerik:RadButton>

        </form>
    </body>
    </html>

    TestRadWindowPage

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 08 Dec 2015 Link to this post

    Hello Keith,

    Straight to each point:

    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 09 Dec 2015 in reply to Marin Bratanov Link to this post

    Hi Marin,

        Thanks for your response!

        Apparently, you did not look at my code that I had posted.  If you did then you will notice that I have the VisibleOnPageLoad property set to false.

        The link you provided for migrating onclientclick handlers helped resolve the issue of a window being opened upon loading the page and the issue of the window getting incorrect values passed to the page the window is loading.  Once I corrected OnClientClicked method, added the AutoPostBack="false" property to the radbutton, and changed the javascript function to use "sender, args" parameters, the issues was resolved.

        As for the RadTabStrip pushing the buttons down in the page when opening new windows, I have decided to have the TabStrip be horizontal at the top of the page.

    Sincerely,

    Keith Jackson

Back to Top