Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadTabStrip on Parent window and Opening RadWindow within a RadWindow

1 Answer 172 Views
Window
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 28 Dec 2015, 04:23 PM
parentwindow.jpg
radwindowafterclickingbuttononparent.jpg
secondradwindowafterclickbuttononfirstradwindow.jpg

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;
}

1 Answer, 1 is accepted

Sort by
0
Keith
Top achievements
Rank 1
answered on 28 Dec 2015, 06:18 PM

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

Tags
Window
Asked by
Keith
Top achievements
Rank 1
Answers by
Keith
Top achievements
Rank 1
Share this question
or