Close Rad window when press outside it

7 posts, 0 answers
  1. ahmed
    ahmed avatar
    10 posts
    Member since:
    Mar 2009

    Posted 08 Jan 2014 Link to this post

    hello

    is that possible to Close Rad window when press outside it

    Best Regards
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Jan 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ahmed
    ahmed avatar
    10 posts
    Member since:
    Mar 2009

    Posted 08 Jan 2014 Link to this post

    thank you it work
    but only one time when page load after that close when active rad window again not hide
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Jan 2014 Link to this post

    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.
  6. ahmed
    ahmed avatar
    10 posts
    Member since:
    Mar 2009

    Posted 09 Jan 2014 Link to this post

    thank you its work prefect
    i have small problem in toggle mode
    the rad menu always in top like attached picture
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Jan 2014 Link to this post

    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.
  8. ahmed
    ahmed avatar
    10 posts
    Member since:
    Mar 2009

    Posted 12 Jan 2014 Link to this post

    not work
    and i don't made to radmenu any classes in CSS file
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017