This is a migrated thread and some comments may be shown as answers.

[Solved] RadTabStrip on Parent window and Opening RadWindow within a RadWindow

1 Answer 302 Views

Window

This is a migrated thread and some comments may be shown as answers.

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<asp:Button ID="Button1" Text="open first dialog 1" runat="server"

OnClientClick="openChildDialog2('DowntimeHistoryInfo.aspx?CoilID=M999', 'DwntmeHist', 'Downtime History Info'); return false;" />

<br />

<button id="button2" onclick="openChildDialog2('DowntimeHistoryInfo.aspx?CoilID=M999', 'DwntmeHist', 'Downtime History Info'); return false;" runat="server">open first dialog 2</button>

<br />

<telerik:RadButton ID="rbtnBL1CoilUptimeHistory" OnClientClicked="openNewWindow2" AutoPostBack="false" runat="server" Text="BL1 COIL UPTIME HISTORY" RenderMode="Classic" Font-Size="11pt">

</telerik:RadButton>

</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)

strUser = strDecUser

End If

If LoginValidation.IsValidAppAccess(strUser, strAppName) Then

UserFunctions.UpdateAppActivity(strUser, strAppName)

Else

Response.Redirect("CustomerPortal")

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

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

//http://www.telerik.com/help/aspnet-ajax/window-programming-using-radwindow-as-dialog.html

//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

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