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

Unable to remove borders.

1 Answer 109 Views

Window

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

Suraj asked on 02 Dec 2013, 04:46 PM

I am having an issue with telerik window. I have changed the styles to remove the border for the window but still it is appearing. The issue happens only in case if window is embedded in a usercontrol. I am unable to attach the project. Below is the source code. In this project there is a dropdown control. If you click on dropdown it will bring a new telerik window which I want to have the borders removed.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FAUSControl.ascx.cs" Inherits="ATR.ePRiSM.Portal.UI.FAUS.FAUSControl" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<script>

function ShowFausSelector() {

//OpenRadWindow("FausSelector.aspx", 400, 500);

var w = document.all("tblFausDropDown").offsetWidth + 10;

var h = 300;

oWnd = radopen("about:blank", "RadWindowForFaus");

oWnd.setSize(w, h);

oWnd.set_modal(false);

oWnd.setUrl("http://www.google.com");

oWnd.set_visibleTitlebar(false);

oWnd.set_visibleStatusbar(false);

x = getAbsoluteLeft(document.all("tblFausDropDown")) - 12;

y = getAbsoluteTop(document.all("tblFausDropDown")) + 20;

oWnd.moveTo(x, y);

}

function getAbsoluteLeft(element) {

try {

var left = 0;

var objParent = element;

do {

left += objParent.offsetLeft;

objParent = objParent.offsetParent;

}

while (objParent != null);

return left;

}

catch (x) { }

}

/******************************************************************************

* Returns the absolute position of the top edge of the specified element.

*****************************************************************************/

function getAbsoluteTop(element) {

try {

var top = 0;

var objParent = element;

do {

top += objParent.offsetTop;

objParent = objParent.offsetParent;

}

while (objParent != null);

return top;

}

catch (x) { }

}

</script>

<style>

.RadWindow_Sunset .rwTopLeft,

.RadWindow_Sunset .rwTopCenter,

.RadWindow_Sunset .rwTopRight,

.RadWindow_Sunset .rwFooterLeft,

.RadWindow_Sunset .rwFooterRight,

.RadWindow_Sunset .rwFooterCenter,

.RadWindow_Sunset .rwBodyLeft,

.RadWindow_Sunset .rwBodyRight,

.RadWindow_Sunset .rwTitlebar,

.RadWindow_Sunset .rwNoTitlebar,

.RadWindow_Sunset .rwTopResize

{

background-image: none !important;

}

.RadWindow_Sunset .rwTitlebar,

.RadWindow_Sunset .rwNoTitlebar

{

display:none !important;

}

</style>

<TABLE style="WIDTH: 100%" border=0 id="tblFausDropDown"><TBODY>

<TR>

<TD onclick="ShowFausSelector()" style="WIDTH: 100%">

<DIV id=ReportCriteria_FausTree_divFaus style=

"BORDER-TOP: #808080 1px solid; HEIGHT: 21px; BORDER-RIGHT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BORDER-LEFT: #808080 1px solid; WIDTH: 100%; BACKGROUND-COLOR: white"

>

<label runat="server" id="lblFaus" style="FLOAT: left; PADDING-LEFT: 2px"></label>

<IMG style="FLOAT: right" alt="" src="../../images/drop-down-arrow-faus.png" width=17 height=21> </DIV></TD></TR></TBODY></TABLE>

<telerik:RadWindowManager ID="RadWindowManagerFaus" runat="server" Skin="Sunset" EnableAjaxSkinRendering="true" VisibleStatusbar="false" VisibleTitlebar="false">

<Windows>

<telerik:RadWindow ID="RadWindowForFaus" runat="server" Skin="Sunset">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

Above is the code from the ascx file,

Below is the code from page that has the embedded ascx file.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WinTest.Default" %>

<%@ Register Src="~/FAUSControl.ascx" TagPrefix="uc1" TagName="FAUSControl" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="scriptProcedure" EnablePartialRendering="true" runat="server"></asp:ScriptManager>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

<Windows>

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleStatusbar="false" VisibleTitlebar="false" Skin="Vista">

</telerik:RadWindow>

<telerik:RadWindow ID="RadWindow2" runat="server" VisibleStatusbar="false" VisibleTitlebar="false" Skin="Vista">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<uc1:FAUSControl runat="server" id="FAUSControl" />

</div>

</form>

</body>

</html>

Kindly advise.

Suraj

1 Answer, 1 is accepted

Accepted

answered on 04 Dec 2013, 01:40 PM

Hello Suraj,

With this setup you have two RadWindowManagers on the page, and the call to radopen() will show a new RadWIndow from the first instance, so it will not be the one you have declared with the Sunset skin.
Here are the three options you can choose from:
- examine this thread to make sure you open the correct RadWindow: http://www.telerik.com/help/aspnet-ajax/radwindow-troubleshooting-wrong-window-opened.html.
- examine this one to see how you can remove the RadWindowManager from the user control and use $find(): http://www.telerik.com/help/aspnet-ajax/window-programming-opening.html.
- use the CssClass property of the control (after you make sure you open the correct one) to cascade through that, and not through a skin-specific selector. You can add a class programmatically after opening the RadWindow, e.g.:
var wnd = radopen();
$telerik.$(wnd.get_popupElement()).addClass("noBorders");

Regards,
Marin Bratanov
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.