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 Answers, 1 is accepted
Hello Keith,
Straight to each point:
- a RadWindow being opened each time the page loads—this can happen if you set the VisibleOnPageLoad property of an instance to true. You can read more about this case here: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/opening-from-the-server. What's more important - to attach client-side handlers to our controls you must only provide their function name, as explained here: http://www.telerik.com/blogs/migrating-onclientclick-handlers-from-asp-button-to-telerik-s-asp-net-ajax-button.
- wrong values being passed—this stems from the incorrect handler registration that causes the handler to execute as soon as the $create() statements are loaded and there are likely to be JS errors that cause such problems.
- on the other issues with the tabstrip—I suggest you review this other demo and employ the approach from it: http://demos.telerik.com/aspnet-ajax/window/examples/radwindowandmdi/defaultcs.aspx. Essentially, make sure your page design accommodates the tabstrip and buttons as desired and provides room for the new tabs.
Regards,
Marin BratanovTelerik
Rank 1
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