Close Rad window when press outside it

[ahmed]

hello

is that possible to Close Rad window when press outside it

Best Regards

[Shinu]

Hi ahmed,

Please have a look into the following code snippet to close the RadWindow by clicking outside of it.

ASPX:

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true">
</telerik:RadWindow>

JavaScript:

<script type="text/javascript">
    function pageLoad() {
        $addHandler(document, "click", onClickHandler);
        lastOpenedWindow = $find("<%=RadWindow1.ClientID %>");
    }
    var lastOpenedWindow;
    var clickedtd;
    function onClickHandler(e) {
        var targedNodeName = e.target;
        if (lastOpenedWindow && (targedNodeName != clickedtd)) {
            if ($telerik.isMouseOverElementEx(lastOpenedWindow.get_popupElement(), e)) return;
            lastOpenedWindow.close();
            lastOpenedWindow = null;
            clickedtd = null;
        }
    }
</script>

Thanks,
Shinu.

[ahmed]

thank you it work
but only one time when page load after that close when active rad window again not hide

[Shinu]

Hi ahmed,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadButton ID="RadButton1" runat="server" Text="Show RadWindow" OnClick="RadButton1_Click">
</telerik:RadButton>
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="false">
</telerik:RadWindow>

C#:

protected void RadButton1_Click(object sender, EventArgs e)
{
    RadWindow1.VisibleOnPageLoad = true;
}

JavaScript:

<script type="text/javascript">
    function pageLoad() {
        $addHandler(document, "click", onClickHandler);
        lastOpenedWindow = $find("<%=RadWindow1.ClientID %>");
    }
    var lastOpenedWindow;
    function onClickHandler(e) {
        if (lastOpenedWindow.IsVisible()) {
            lastOpenedWindow.close();
        }
    }
</script>

Hope this will helps you.
Thanks,
Shinu.

[ahmed]

thank you its work prefect
i have small problem in toggle mode
the rad menu always in top like attached picture

[Shinu]

Hi ahmed.

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true"
    Skin="Default" EnableTextHTMLEncoding="true" ShowToggleHandle="true">
    <Items>
        <telerik:RadMenuItem Text="Products">
            <Items>
                <telerik:RadMenuItem Text="ASP.NET AJAX Controls" />
                <telerik:RadMenuItem Text="WinForms Controls" />
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Consulting">
            <Items>
                <telerik:RadMenuItem Text="On-site Training" />
                <telerik:RadMenuItem Text="Consulting Express" />
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Purchase">
            <Items>
                <telerik:RadMenuItem Text="Buy Now" />
                <telerik:RadMenuItem Text="Renewals & Upgrades" />
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Please provide your full code with CSS if it doesn't help.
Thanks,
Shinu.

[ahmed]

not work
and i don't made to radmenu any classes in CSS file