Close radwindow by pressing any key

[Bader]

Hi,

I have a problem with closing the radwindow control by pressing any key of the keyboard.

Here is my code:
"

<

 

 

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

 

<

 

 

head runat="server">

 

 

 

<title></title>

 

 

 

<script language="javascript" type="text/javascript">

 

 

 

function GetRadWindow() {

 

 

 

var oWindow = null;

 

 

 

if (window.radWindow)

 

oWindow = window.RadWindow;

 

//Will work in Moz in all cases, including clasic dialog

 

 

 

else if (window.frameElement.radWindow)

 

oWindow = window.frameElement.radWindow;

 

//IE (and Moz as well)

 

 

 

return oWindow;

 

}

 

 

function Close(evt) {

 

 

 

if ((evt.keyCode >= 0) && (evt.keyCode <= 127))

 

GetRadWindow().Close();

}

 

 

 

</script>

 

 

 

<style type="text/css">

 

 

 

#bg {position:absolute; }

 

 

 

#content {position:relative; z-index:2;}

 

 

 

#LayerPanel1 {position:relative; z-index:1;}

 

 

 

</style>

 

 

 

<script type="text/javascript">

 

 

 

function OnClientInitialize(dock, args) {

 

 

 

var divMap = $get("bg");

 

divMap.appendChild(dock.get_element());

}

 

 

</script>

 

</

 

 

head>

 

<

 

 

body onkeypress="Close(event)">

 

 

 

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

 

 

 

<div>

 

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server" />

 

 

 

<asp:Panel ID="Panel2" Width="100%" Height="100%" runat="server" >

 

 

 

<asp:Panel ID="bg" Height="100%" style="margin-left:-10px; margin-top:-10px;" Width="100%" runat="server" >

 

 

 

<asp:Image ID="CMapImage" Width="100%" Height="150%" runat="server" />

 

 

 

</asp:Panel>

 

 

 

<asp:Panel ID="LayerPanel1" runat="server">

 

 

 

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

 

 

 

 

</telerik:RadDockLayout>

 

 

 

</asp:Panel>

 

 

 

<asp:Panel ID="content" Width="100%" Height="60px" runat="server">

 

 

 

<asp:Panel ID="EscPanel" runat="server">

 

 

 

</asp:Panel>

 

 

 

</asp:Panel>

 

 

 

</asp:Panel>

 

 

 

</div>

 

 

 

</form>

 

</

 

 

body>

 

</

 

 

html>

 

"

But unfortunatily it is not working. Only by pressing the Esc key the radwindow control is closed unlike the requirements.

Please, I need your help in order to close the radwindow control by pressing any key.
It is appreciated to send me the modified code.

Regards,
Bader

[Princy]

Hello Bader ,


I did some modification to the code to work as per requirement. Here is the code that I tried.

Client code:

<script type="text/javascript">
    function pageLoad() {
        document.onkeypress = KeyPressHappened;
    }
    function KeyPressHappened(e) {
        if (!e) e = window.event;
        if ((e.keyCode >= 0) && (e.keyCode <= 127))
            GetRadWindow().Close();
    }
    function GetRadWindow() {
         var oWindow = null;
        if (window.radWindow)
           oWindow = window.RadWindow;
           //Will work in Moz in all cases, including clasic dialog
        else if (window.frameElement.radWindow)
           oWindow = window.frameElement.radWindow;
        //IE (and Moz as well)
        return oWindow;
   }
</script>

Thanks,
Princy.

[Bader]

Hi,

Thank you for your reply, you code was very useful. But I still have a problem.
If I open the radwindow control and then I press any key then the radwindow won't be closed (I have to click the radwindow - content -and after that i can close it by pressing any key).

Please, Explain to me how can I close the radwindow control by pressing any key even without clicking the radwindow content first.
It is appreciated to send me the modified code.

Regrads,
Bader

 

 

[Princy]

Hello,

I tried setting focus to RadWindow in order to capture the keypress and that worked for me. Attach OnClientShow method to RadWindow and perform the code as shown below.

Client code:

function OnClientShow(sender, args) {
    sender.get_contentFrame().contentWindow.focus();
}

Thanks,
Princy.

[Bader]

Hello,

Thank you very much for your help,
There is a small poblem: After I open the radwindow control for the first time, I have to click the control content in order to enable the user to close it by pressing any key. If the user did that and opened the radwindow again, then the user will be able to close it by pressing any without clicking its content.

Please, Can you explain that to me,
It is apprecited to send me the modified code.

Regards,
Bader 

[Bader]

Hello,

Thank you for your last reply,
I have a problem,
your code is running will in all browsers instead of FireFox, why and how can I fix it,

Please, I need your help,
It is apprecited to send me the modified code,

Regards,
Bader

[Bader]

Hello,

Thank you for your last reply,
I think that you have a mistake in your last code. In order to make focus on the radwindow control you should use the following code (Related to the page which is displayed within the radindow control):

<script language="javascript" type="text/javascript">
        function pageLoad() {
            document.onkeypress = KeyPressHappened;
        }
        function KeyPressHappened(e) {
            if (!e) e = window.event;
            if ((e.keyCode >= 0) && (e.keyCode <= 127))
                GetRadWindow().Close();
        }
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.RadWindow;
            //Will work in Moz in all cases, including clasic dialog
            else if (window.frameElement.radWindow)
                oWindow = window.frameElement.radWindow;
            //IE (and Moz as well)
            return oWindow;
        }

        function FocusOnRadWindow() {
            GetRadWindow().GetContentFrame().contentWindow.focus();
        }

    </script>


and:

<body onload="FocusOnRadWindow()">

Your last code is correct but for different purpose (Quoted from my last post: "After I open the radwindow control for the first time, I have to click the control content in order to enable the user to close it by pressing any key. If the user did that and opened the radwindow again, then the user will be able to close it by pressing any without clicking its content." )

But unfortunatily I still have another problem
The above code is running without problems in all browsers instead of FireFox, 

Please, I need your explaination about the above issue because I'm stuck in this point.
It is apprecited to send me the modified code,

Regards,
Bader

[Bader]

Hello,

Thank you for your reply,
I have a problem which I can't solve:
Here is my javascript code that I use in my page (Displayed within the radwindow control). This code is working without problems in all browsers instead of FireFox.

<script language="javascript" type="text/javascript">
        function pageLoad() {
            document.onkeypress = KeyPressHappened;
        }
        function KeyPressHappened(e) {
            if (!e) e = window.event;
            if ((e.keyCode >= 0) && (e.keyCode <= 127))
                GetRadWindow().Close();
        }
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.RadWindow;
            //Will work in Moz in all cases, including clasic dialog
            else if (window.frameElement.radWindow)
                oWindow = window.frameElement.radWindow;
            //IE (and Moz as well)
            return oWindow;
        }

        function FocusOnRadWindow() {
            GetRadWindow().GetContentFrame().contentWindow.focus();
        }

    </script>


and:

<body onload="FocusOnRadWindow()">

Can you explain to me how can I fix the above problem.
Please, I need an immediate help.

Regards and Happy New Year,
Bader

[Georgi Tunev]

Hello Bader,

In your code, you are using a pretty old version of the GetRadWindow() function - you need to use the following one:

function GetRadWindow()
{
  var oWindow = null;
  if (window.radWindow)
     oWindow = window.radWindow;
  else if (window.frameElement.radWindow)
     oWindow = window.frameElement.radWindow;
  return oWindow;
}

(note the capital R in your GetRadWindow() function on the 3rd line)


and you will also need to call the focus with a small timeout

function FocusOnRadWindow()
{
    window.setTimeout(function ()
    {
        GetRadWindow().GetContentFrame().contentWindow.focus();
    }, 100);
}

Regards,
Georgi Tunev
the Telerik team

[Bader]

Hello,

Thank you it is works,
Please explain to me why I need to call the focus with a small timeout.

Regards,
Bader

[Georgi Tunev]

Hi Bader,

This is needed sometimes because in Firefox the body's onload event is fired a bit earlier. As an alternative, you can try placing the code from body's onload in the pageLoad() function.


Kind regards,
Georgi Tunev
the Telerik team

[Bader]

Hello,

Thank you for your reply,
I found another problem in ie7.
I used your last code and by trying to close the radwindow by pressing any key, it is not working. I have to click the radwindow content using the mouse and then I can close the radwindow by pressing any key.
Please, I need to close the radwindow by presing any key in all browsers without using the mouse.

Please, I need your help.
It is appreciated to send me the modified code.

Regrads,
Bader

[Bader]

Hello,

Ok, I solved the problem by removing radwindowmanager control from the page. There was two controls, I removed one of them.
I dont know why does this removing solved the problem, if anyone has answer, please explain to me.

Regards,
Bader

[Svetlina Anati]

Hi Bader,

 I cannot tell what was the exact problem in your particular case without examining and debugging sample code. However, the RadWindowManager control is designed as singleton and there should be only one instance of it on a page. If you have more managers in the resultant page (e.g coming for user controls, master page, etc) this should not impact the performance significantly but only one of the managers will be "active", depending on the manager's creation time. As a result, if you want to call methods as radalert, radopen, etc the active manager will execute them with its settings. We recently provided the ability to use these methods as methods of the manager client object and this would fix the  problem explained above and makes the usage of multiple managers possible. However, since the initial intent was different, I recommend to use only one manager despite this. Usually, the manager is put on the main page or the master in order to enable radalert, radconfirm, etc for all pages and in user controls and content page - separate RadWindows are used (you can use a separate RadWindow without a manager and there is no limitation of their number).

This being said, I recommend to use only one RadWindowManager and separate RadWindows on other code segments. However, if you prefer to use multiple managers, you should not call methods as 'static' but as instance methods, e.g manager1.radalert instead of radalert.

I  hope that my reply is detailed enough and helpful and I assume that this was the reason removing one of the managers fixed the issue.

Kind regards,

Svetlina
the Telerik team