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

Opening Bordered or NoBorder Windows

2 Answers 128 Views

Window

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

Dave asked on 27 Mar 2021, 06:01 PM

Hi,

My application opens modal dialogs on the client using RadWindowManager. I want to be able to open the dialog with a border or without. I've attached a boiled down example. The main page, Test.aspx, has two buttons for opening either one entirely client side. When you launch Test.aspx, then click "Has Border", you get a modal dialog (containing Test2.aspx) with a Black skin border. If instead, after launching Test.aspx, you click "No Border", you get a modal dialog without a border. Good.

Now here's the issue: Launch Test.aspx, and open a "No Border" dialog, then close it. Now click "Has Border", but you still get a "No Border" dialog. Basically whatever you click the first time, is what you get on all subsequent clicks. The script in Test.aspx is attempting to change the cssClass on the fly, which doesn't seem to work. The goal is to be able to open the page, open and close dialogs with the desired border or not, without having to refresh the page.

What am I not doing? Or is something not working right?

Dave

Test.aspx:

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

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

<!DOCTYPE html>

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

<head id="head1" runat="server">

<title></title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function onOpenHasBorder(sender, args) {

args.set_cancel(true);

var mgr = GetRadWindowManager();

mgr.set_cssClass('');

var dlg = mgr.open('Test2.aspx', null);

dlg.set_cssClass('');

}

function onOpenNoBorder(sender, args) {

args.set_cancel(true);

var mgr = GetRadWindowManager();

mgr.set_cssClass('noBorder');

var dlg = mgr.open('Test2.aspx', null);

dlg.set_cssClass('noBorder');

}

</script>

</telerik:RadCodeBlock>

<style type="text/css">

.noBorder .rwCorner .rwTopLeft,

.noBorder .rwTitlebar,

.noBorder .rwCorner .rwTopRight,

.noBorder .rwIcon,

.noBorder table .rwTopLeft,

.noBorder table .rwTopRight,

.noBorder table .rwFooterLeft,

.noBorder table .rwFooterRight,

.noBorder table .rwFooterCenter,

.noBorder table .rwBodyLeft,

.noBorder table .rwBodyRight,

.noBorder table .rwTitlebar,

.noBorder table .rwTopResize,

.noBorder table .rwStatusbar,

.noBorder table .rwStatusbar .rwLoading

{

display: none !important;

background-image: none !important;

}

</style>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server" />

<br />

<telerik:RadButton ID="btnHasBorder" runat="server"

Text="Has Border"

OnClientClicking="onOpenHasBorder"

/>

<br />

<telerik:RadButton ID="btnNoBorder" runat="server"

Text="No Border"

OnClientClicking="onOpenNoBorder"

/>

<telerik:RadWindowManager ID="modalWindowMgr" runat="server"

EnableShadow="false"

Behaviors="Close, Move"

DestroyOnClose="true"

VisibleOnPageLoad="false"

Skin="Black"

AutoSize="false"

Width="800px"

Height="580px"

ReloadOnShow="false"

ShowContentDuringLoad="false"

Modal="true"

EnableViewState="false"

VisibleStatusbar="false"

Style="z-index:9000"

/>

</form>

</body>

</html>

Test2.aspx:

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

<%@ Register TagPrefix="STL" TagName="cssConfirmDialog" src="~/css/dialogConfirm.ascx" %>

<!DOCTYPE html>

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

<head id="Head1" runat="server">

<meta charset="utf-8"/>

<title></title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function onCloseClicking(sender, args) {

args.set_cancel(true);

window.close();

}

</script>

</telerik:RadCodeBlock>

<style type="text/css">

html,body,form

{

height:100%;

margin:0;

padding:0;

}

</style>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server" />

<table style="height:100%; width:100%">

<tr>

<td style="vertical-align:middle; text-align: center;">

<div>

<telerik:RadButton ID="btnOK" runat="server" Text="Close Window"

AutoPostBack="false"

OnClientClicking="onCloseClicking"

/>

</div>

</td>

</tr>

</table>

</form>

</body>

</html>

2 Answers, 1 is accepted

Accepted

answered on 31 Mar 2021, 01:14 PM

Hi Dave,

Thank you for the provided information!

I would suggest you get the popup element of the Window and use jQuery to add/remove the desired css class. You will need to place the JavaScript code after the RadScriptManager, to be able to use the embedded jQuery:

<telerik:RadScriptManager ID="RadScriptManager1" EnablePageMethods="true" runat="server" />
       
<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    <script type="text/javascript">
        var $ = $telerik.$;
        function onOpenHasBorder(sender, args) {
            args.set_cancel(true);
            var mgr = GetRadWindowManager();

            var dlg = mgr.open("Test2.aspx", null);
            var $popup = $(dlg.get_popupElement());
            if ($popup.hasClass('noBorder')) $popup.removeClass('noBorder');
        }

        function onOpenNoBorder(sender, args) {
            args.set_cancel(true);
            var mgr = GetRadWindowManager();

            var dlg = mgr.open("Test2.aspx", null);
            var $popup = $(dlg.get_popupElement());
            if (!$popup.hasClass('noBorder')) $popup.addClass('noBorder');
        }
    </script>
</telerik:RadCodeBlock>

Please give it a try and let me know how this works for you.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.