RadTabStrip on Parent window and Opening RadWindow within a RadWindow

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

    Posted 28 Dec 2015 Link to this post

    I have ASP.Net pages with VB.Net as the code-behind.

    The ASP.Net page for parent window has the RadScriptManager, a RadMenu, a RadTabStrip, and some buttons to open a different page in a RadWindow.  Parent page also has the RadWindowManager.

    The ASP.Net page opened in a RadWindow has a button on it to open another page in a RadWindow.

    When I click on a button on the parent window, a RadWindow is opened up with a different page and a tab is added to the RadTabStrip on the parent window for the RadWindow.  Then when I click on a button in the RadWindow which is the child to the parent window, another RadWindow is opened with another page but a tab is NOT created for this RadWindow on the RadTabStrip on the parent window.

    Please see the attached screenshots.  Note that in 3rd screenshot that there is no tab in RadTabStrip for 2nd RadWindow.

    How to get the RadWindow opened from another RadWindow to show up as a tab on the RadTabStrip of the parent window?

    Code of ASP.Net page for parent Window:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestRadWindowPage3.aspx.vb" Inherits="TestRadWindowPage3" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <link href="/Content/styles.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            html .RadMenu .rmLink,
            html .RadMenu .rmHorizontal .rmText {
                float: none;
                padding: 0;
                text-align: center;
            }   
            .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;
            }
            .auto-style1 {
                width: 20px;
            }
            .auto-style2 {
                width: 740px;
                height: 162px;
            }
        </style>
        <script src="/Scripts/scripts.js" type="text/javascript"></script>
        <script type="text/javascript" src="/scripts/jquery.min.js"></script>
        <script type = "text/javascript" >
            function preventBack() { window.history.forward(); }
            setTimeout("preventBack()", 3);
            window.onunload = function () { null };
        </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:RadWindowManager ShowOnTopWhenMaximized="false" Skin="Web20" AutoSize="true"
            OnClientActivate="OnClientActivate" OnClientClose="OnClientClose"
            Behaviors="Close,Minimize,Move,Reload,Resize" OnClientCommand="OnClientCommand"
            ID="RadWindowManager1" RestrictionZoneID="RestrictionZone" runat="server" EnableShadow="true">
        </telerik:RadWindowManager>
            <div class="winbar">
                <telerik:RadTabStrip OnClientTabSelected="OnClientTabSelected" ID="RadTabStrip1"
                    ScrollChildren="True" ScrollButtonsPosition="Middle" Height="24px" Width="960px" CssClass="taskbar"
                    Orientation="HorizontalBottom" runat="server" Skin="WebBlue" OnClientLoad="tabStrip_load" SelectedIndex="0">
                    <Tabs>
                        <telerik:RadTab Style="display: none;" Selected="True"></telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <div id="RestrictionZone" class="restrictionZone">
                    <br />
                    <br />
                    <br />
                    <asp:Button ID="Button1" Text="open first dialog 1" runat="server"
                                OnClientClick="openChildDialog2('DowntimeHistoryInfo.aspx?CoilID=M999', 'DwntmeHist', 'Downtime History Info'); return false;" />
                    <br />
                    <br />
                    <button id="button2" onclick="openChildDialog2('DowntimeHistoryInfo.aspx?CoilID=M999', 'DwntmeHist', 'Downtime History Info'); return false;" runat="server">open first dialog 2</button>
                    <br />
                    <br />
                    <telerik:RadButton ID="rbtnBL1CoilUptimeHistory" OnClientClicked="openNewWindow2" AutoPostBack="false" runat="server" Text="BL1 COIL UPTIME HISTORY" RenderMode="Classic"  Font-Size="11pt">
                    </telerik:RadButton>
                </div>
            </div>
            <script type="text/javascript">
                //this is the function that receives the data from the child popup and handles it on the current page
                function useDataFromChild(data) {
                    document.getElementById("Textbox1").value = data;
                }
            </script>
        </form>
    </body>
    </html>

    VB.Net code-behind for parent Window:

    Imports System.IO
    Imports System.Drawing
    Imports Telerik.Web.UI
     
    Partial Class TestRadWindowPage3
        Inherits System.Web.UI.Page
     
        Private strErrorMsg As String
     
        Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
            Try
                Dim strUser As String = ""
                Dim strDecUser As String = ""
                Dim strAppName As String = "IPMENUPRODUPTIMEVIEWER"
     
                If Request.IsAuthenticated Then
                    If Not IsPostBack Then
                        If Not Session("UserName") Is Nothing Then
                            strUser = CType(Session("UserName"), String)
     
                            strDecUser = DataEncryption.base64Decode(strUser)
     
                            strDecUser = DataEncryption.base64Decode(strDecUser)
     
                            strDecUser = DataEncryption.base64Decode(strDecUser)
     
                            strUser = strDecUser
     
                        End If
     
                        If LoginValidation.IsValidAppAccess(strUser, strAppName) Then
                            UserFunctions.UpdateAppActivity(strUser, strAppName)
                        Else
                            Response.Redirect("CustomerPortal")
                        End If
                    End If
                Else
                    FormsAuthentication.RedirectToLoginPage()
                End If
     
            Catch ex As Exception
                strErrorMsg = "Procedure: Page_Init - TestRadWindowPage3" & vbCrLf & "Error Message: " & ex.Message & vbCrLf & "Source: " & ex.Source
                UserFunctions.UserMsgBox(Me, strErrorMsg)
     
            End Try
        End Sub
     
     
        Protected Sub RadMenu1_ItemClick(sender As Object, e As RadMenuEventArgs) Handles RadMenu1.ItemClick
            Try
                Dim currentItem As RadMenuItem = RadMenu1.FindItemByText("Logout")
     
                If Not currentItem Is Nothing Then
                    If currentItem.Selected Then
                        LoginValidation.LogoutUser()
                    End If
                End If
     
            Catch ex As Exception
                strErrorMsg = "Procedure: RadMenu1_ItemClick - TestRadWindowPage3" & vbCrLf & "Error Message: " & ex.Message & vbCrLf & "Source: " & ex.Source
                UserFunctions.UserMsgBox(Me, strErrorMsg)
     
            End Try
     
        End Sub
     
    End Class

    Code of ASP.Net page opened in a RadWindow from parent Window:

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

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    <script src="/Scripts/scripts.js" type="text/javascript"></script>
    </head>
    <body style="background-color: #3A4459">
        <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" ForeColor="White" Text="Downtime History Info"></asp:Label>
            <br /><br />
            <asp:Label ID="Label2" runat="server" ForeColor="White"></asp:Label>
    <br />
    <br />
    <br />
    <asp:Button ID="Button1" Text="open second dialog" runat="server" 
    OnClientClick="openChildDialog2('second.aspx', 'secondDialog', 'Second Dialog'); return false;" />
    <br />
    <asp:TextBox ID="Textbox1" runat="server" />
    <asp:Button ID="Button2" Text="send data to main form" runat="server"
    OnClientClick="generateDataForParent(); return false;" />
    <script type="text/javascript">
       //this is the function that receives the data from the child popup and handles it on the current page
       function useDataFromChild(data) {
           document.getElementById("Textbox1").value = data;
       }

       //each page needs to define such a function
       function generateDataForParent() {
           var info = document.getElementById("Textbox1").value;
           sendDataToParent(info);
       }
    </script>
        </div>
        </form>
    </body>
    </html>

    VB.Net code-behind for first RadWindow:

     

    Partial Class DowntimeHistoryInfo
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            Label2.Text = "Coil ID = " & UCase(Request.QueryString("CoilID"))
        End Sub
    End Class

    Code of ASP.Net page opened in a RadWindow from first RadWindow:

     

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Second.aspx.vb" Inherits="Second" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Second Window"></asp:Label>
        </div>
        </form>
    </body>
    </html>

    Javascript code for scripts.js:

     

    (function (global, undefined) {
        var tabStrip;
     
        function tabStrip_load(sender, args) {
            tabStrip = sender;
        }
     
        //opening the window
        function openNewWindow(sender, args) {
            //var item = args.get_item();
            //var itemUrl = item.get_value();
            //var itemText = item.get_text();
            //if (itemUrl) {
            //}
            var btnID = sender.get_id();
            var wrkctr = btnID.substr(4, 3);
            //var oWnd = radopen(itemUrl, null);
            //var oWnd = radopen("CoilUptimeHistory.aspx?WRKCTR=" + wrkctr, null, 825, 850);
            var oWnd = radopen("CoilUptimeHistory.aspx?WRKCTR=" + wrkctr, null);
            //var oWnd = GetRadWindowManager().open("CoilUptimeHistory.aspx?WRKCTR=" + wrkctr, null);
            //oWnd.set_title(itemText);
            oWnd.set_title(wrkctr + ' Coil Uptime History');
            oWnd.center();
            tabStrip.trackChanges();
            //create a new tab
            var tab = new Telerik.Web.UI.RadTab();
            //set the text of the tab
            //tab.set_text(itemText);
            tab.set_text(wrkctr + ' Coil Uptime History');
            oWnd.correspondingTab = tab;
     
            //tab.set_imageUrl(item.get_imageUrl());
            //add the tab to the tabstrip
     
            tabStrip.get_tabs().add(tab);
            tabStrip.repaint();
            tab.correspondingWnd = oWnd;
            tabStrip.commitChanges();
     
            //Select this tab
            tab.select();
        }
     
        //opening the window
        function openNewWindow2(sender, args) {
            var btnID = sender.get_id();
            var wrkctr = btnID.substr(4, 3);
     
            //var oWnd = radopen("CoilUptimeHistory.aspx?WRKCTR=" + wrkctr, null);
            var oWnd = radopen("DowntimeHistoryInfo.aspx?CoilID=M99988", null);
     
            oWnd.set_title(wrkctr + ' Coil Uptime History');
            oWnd.center();
     
            tabStrip.trackChanges();
     
            //create a new tab
            var tab = new Telerik.Web.UI.RadTab();
            //set the text of the tab
            tab.set_text(wrkctr + ' Coil Uptime History');
            oWnd.correspondingTab = tab;
     
            //add the tab to the tabstrip
     
            tabStrip.get_tabs().add(tab);
            tabStrip.repaint();
            tab.correspondingWnd = oWnd;
            tabStrip.commitChanges();
     
            //Select this tab
            tab.select();
        }
     
        function openChildDialog2(url, wndName, title) {
            //in case of erroneous arguments, add some error handling and prevention
            if (!url)
                url = "errorPage.aspx";
            if (!wndName)
                wndName = "popup_" + Math.random();
            var currentWnd = GetRadWindow();
            var browserWnd = window;
            if (currentWnd)
                browserWnd = currentWnd.BrowserWindow;
            setTimeout(function () {
                //var wnd = browserWnd.radopen(url, wndName);
                var wnd = browserWnd.radopen(url, null);
                wnd.__parentBackReference = window; //pass the current window object of the page that opens the dialog so it can be used later
                wnd.center();
     
                if (title)
                    wnd.set_title(title); //you can pass more parameters for RadWindow settings, e.g., modality, dimensions, etc.
                //you can even add arguments that will pass data from the parent to the child as shown here
                //in the On the Dialog Page section that shows how to access custom fields in the RadWindow object and use them.
                //of course, you can also use querystrings in the URL.
     
     
                tabStrip.trackChanges();
     
                //create a new tab
                var tab = new Telerik.Web.UI.RadTab();
                //set the text of the tab
                tab.set_text(title);
                wnd.correspondingTab = tab;
                 
                //add the tab to the tabstrip
     
                tabStrip.get_tabs().add(tab);
                tabStrip.repaint();
                tab.correspondingWnd = wnd;
                tabStrip.commitChanges();
     
                //Select this tab
                tab.select();
     
            }, 0);
        }
     
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.radWindow;
            else if (window.frameElement && window.frameElement.radWindow)
                oWindow = window.frameElement.radWindow;
            return oWindow;
        }
     
        function OnClientCommand(sender, args) {
            //because we don't want to show the minimized RadWindow, we hide it after minimizing
            //and raise the _Maximized flag (used in OnClientTabSelected)
            if (args.get_commandName() == "Minimize") {
                if (sender.isMaximized()) {
                    sender._Maximized = true;
                }
     
                sender.hide();
                //raise the _toMinimize flag (used in OnClientActivate)
                sender._toMinimize = true;
                var tab = sender.correspondingTab;
                if (tab) {
                    tab.set_selected(false);
                }
            }
        }
     
        function OnClientTabSelected(sender, args) {
            //get a reference to the corresponding window
            var win = args.get_tab().correspondingWnd;
     
            if (!win) return;
     
            if (!win.isVisible()) {
                win.show();
                win.restore();
                //if the window was maximized before client minimizes it, we need to restore
                //its maximized state
                if (win._Maximized) {
                    win.maximize();
                    win._Maximized = null;
                }
     
            }
            setTimeout(function () {
                win.setActive(true);
            }, 0);
        }
     
        function OnClientActivate(sender, args) {
            var tab = sender.correspondingTab;
            if (tab && !sender._toMinimize) {
                tab.set_selected(true);
            }
            sender._toMinimize = false;
     
            //maximized RadWindows do not update their z-index OOB
            if (sender.isMaximized()) {
                increaseZindex(sender);
            }
        }
        function OnClientClose(oWnd) {
     
            //remove the corresponding tab from the tabstrip
            var tab = oWnd.correspondingTab;
            if (tab) {
                tabStrip.trackChanges();
                tabStrip.get_tabs().remove(tab);
                tabStrip.commitChanges();
            }
        }
     
        function increaseZindex(wnd) {
            var currZIndex = wnd.get_zindex();
            var zIndexToSet = Telerik.Web.UI.RadWindowUtils.get_newZindex(currZIndex);
            wnd.get_popupElement().style.zIndex = zIndexToSet;
        }
     
        global.tabStrip_load = tabStrip_load;
        global.OnClientClose = OnClientClose;
        global.OnClientActivate = OnClientActivate;
        global.OnClientTabSelected = OnClientTabSelected;
        global.OnClientCommand = OnClientCommand;
        global.openNewWindow = openNewWindow;
        global.openNewWindow2 = openNewWindow2;
        global.openChildDialog2 = openChildDialog2;
    })(window);

    CSS code for styles.css:

    div#main {
        z-index: auto;/* reset z-index so that the Menu stays on top of the opening Windows */
    }
     
    .demo-container{
        width: 880px;
    }
    .restrictionZone
    {
        width: 1067px;
        height: 913px;
    }
    .taskbar
    {
        display: block;
        /*float: left;*/
    }
    .winbar
    {
        /*width: 781px;*/
        width: 960px;
        /*height: 463px;*/
        height: 463px;
        /*padding: 30px 33px 85px 34px;*/
        padding: 0px 0px 0px 0px;
        /*background-image: url('/images/monitor.jpg');*/
        background-image: url('/images/taskbar5.jpg');
        background-repeat: no-repeat;
        /*margin: 15px 0 0 15px;*/
    }
     
    div.RadTabStrip .rtsLevel
    {
        width: auto;
    }

  2. Keith
    Keith avatar
    102 posts
    Member since:
    Mar 2015

    Posted 28 Dec 2015 in reply to Keith Link to this post

    I found a way to get it to work.

    First I removed the reference to scripts.js in the ASP.Net page in the first RadWindow and second RadWindow.  Only the parent window would have a reference to scripts.js.

    Then I went to the following link:

    Calling Functions In Windows 

    In the page for that link, I followed the example code for "Call a Function in the Parent Page from the Content Page" to put in Javascript functions in the ASP.Net for the first RadWindow and changed the button onclick to call CallFnOnParent javascript function.

    I have tested it and it worked perfectly.  All windows are showing up on the RadTabStrip on the parent window.

    Sincerely,

    Keith Jackson

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top