Keeping RadWindow open after RadAlert 'Ok'

5 posts, 1 answers
  1. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 23 Oct 2013 Link to this post

    Howdy all.

    So, I have a RadMenu where the user clicks a button that opens a RadWindow.  Then the user can click anywhere else but on the window itself and close said window.  That works beautifully.

    I now have a RadGrid with a GridTemplateColumn that has a LinkButton.  LinkButton goes to the code behind, figures stuff out, and if all is good, redirects to another page in the project.  If something is awry and it can't for some reason, it instead pops up a default RadAlert that says 'Something's wrong'.  The RadAlert is Modal and appears over the RadWindow, not letting the user have any interaction on the page under it.  THAT works.

    Here's where I'm going cross-eyed: Once I hit Ok, I want the RadWindow with the grid to stay open, and the RadAlert to close.  However, my code for 'Click Anywhere and close' is tripping, and I'm not sure how to let it know that the click on the RadAlert is ok.

    This is also, adding shades of complexity, part on a master page, and part on the content page.  I'll mark which bit is where.

    Here's my code.

    First, menu and window I want to stay up - this is on the Content page:
    <telerik:RadMenu id="menuEmp" ClientIDMode="Static" runat="server" flow="Vertical" OnClientItemClicked="MenuOpenWindow" Width="100%"
        BackColor="#37495D">
        <Items>
          <telerik:RadMenuItem ImageUrl="../Images/button1.png" Value="EmpProj" />
        </Items>
    </telerik:RadMenu>
     
    <telerik:RadWindow id="winEmpProj" runat="server" Top="0" Left="0" Style="z-index: 8000" EnableEmbeddedSkins="false" OffsetElementID="divEmpHeader"
        ShowContentDuringLoad="false" VisibleStatusbar="false" VisibleTitlebar="false" AutoSize="true">
        <ContentTemplate>
            <div id="divProjListList" runat="server" style="width: 400px;">
                <div>Projects</div>
                <div style="width: 400px">
                    <telerik:RadGrid ID="grdEmp" runat="server" AutoGenerateColumns="False"
                        Skin="" EnableLinqExpressions="False" CellSpacing="0" EnableViewState="False">
                        <ClientSettings Selecting-AllowRowSelect="false" EnablePostBackOnRowClick="true" />
                        <MasterTableView DataKeyNames="KeyColumn" ShowHeader="true" HeaderStyle-HorizontalAlign="Center" EnableViewState="false">
                            <Columns>
                                <telerik:GridTemplateColumn UniqueName="EmpNo" HeaderText="EmpNo" ItemStyle-HorizontalAlign="Left">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="btnEmpNo" runat="server" OnClick="LoadEmp"><%# DataBinder.Eval(Container.DataItem, "EmpNo")%></asp:LinkButton>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn DataField="Department" />
                                <telerik:GridBoundColumn DataField="Project" />
                                <telerik:GridBoundColumn DataField="Supervisor" />
                                </telerik:GridBoundColumn>
                            </Columns>
                            <HeaderStyle HorizontalAlign="Center" />
                        </MasterTableView>
                        <FilterMenu EnableImageSprites="False">
                        </FilterMenu>
                    </telerik:RadGrid>
                </div>
            </div>
        </ContentTemplate>
    </telerik:RadWindow>

    Now, the Menu specific Javascript, also on the Content page.
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function MenuOpenWindow(windowTitle) {
                var oWindow;
                var offsetElementBounds;
                var menu = $find("<%=menu.ClientID%>");
                var menuItem = menu.findItemByValue(windowTitle).get_element();
      
                //Closes the last window opened
                if (lastOpenedWindow) {
                    lastOpenedWindow.close();
                    lastOpenedWindow = null;
                }
                 
                if (windowTitle == "EmpProj") {
                    if (lastWindowTitle != "EmpProj") {
                        oWindow = $find("<%=winEmpProj.ClientID%>");
                        oWindow.show();
                        if (oWindow.get_offsetElementID()) {
                            offsetElementBounds = $telerik.getBounds($get(oWindow.get_offsetElementID()));
                            var x = offsetElementBounds.x + (menuItem.offsetWidth / 3);
                            var y = menuItem.offsetTop + offsetElementBounds.y - (menuItem.offsetHeight / 3);
                            oWindow.moveTo(x, y);
                        }
                        lastOpenedWindow = oWindow;
                        lastWindowTitle = "EmpProj";
                        return false;
                    } else {
                        lastWindowTitle = null;
                    }
                }
            }
        </script>
    </telerik:RadScriptBlock>


    Now, the VB code behind of the Content page.  First method is where the window is opened, and the second is where the RadAlert is generated.
    Private Sub menuEmp_ItemClick(sender As Object, e As Telerik.Web.UI.RadMenuEventArgs) Handles menuEmp.ItemClick
        Select Case e.Item.Value
            Case "Endorsed"
                grdEndorsed.DataSource = Nothing
                grdEndorsed.Rebind()
        End Select
        Dim scriptstring As String = "function f(){{MenuOpenWindow('" & e.Item.Value & "');;Sys.Application.remove_load(f);}};Sys.Application.add_load(f);"
        ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "showWindow", scriptstring, True)
    End Sub
     
    Private Function LoadEmp()
        'Stuff done
        If {stuff true} Then
            'Do stuff
        Else
            Dim winManger As RadWindowManager = Master.FindControl("RadWindowManager1")
            winManger.RadAlert("Something's Wrong", 50, 100, "Project", "message")
            Exit Sub
        End If
    End Function

    Because this Javascript is used throughout the project on multiple pages, it's on the Master page.
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            //Global Variables
            var lastOpenedWindow;
            var lastWindowTitle;
            var alertWindowUp;
     
            function message(args) {
                //This is here to give RadWindow serverside a place to go.
                if (lastWindowTitle == "EmpProj" && args == true) {
                    alertWindowUp = true;
                }
            }
     
            function pageLoad() {
                $addHandler(document, "click", onClickHandler);
            }
     
            function onClickHandler(e) {
                var targedNodeName = e.target;
     
                if (lastOpenedWindow) {
                    // If the RadWindow is clicked then do nothing ;
                    if ($telerik.isMouseOverElementEx(lastOpenedWindow.get_popupElement(), e)) return;
     
                    lastOpenedWindow.close();
                    lastOpenedWindow = null;
                    lastWindowTitle = null;
     
                    if (alertWindowUp == true) {
                        lastWindowTitle = null;
                        MenuOpenWindow("EmpProj");
                        alertWindowUp = false;
                    }
                }
            }
        </script>
    </telerik:RadScriptBlock>

    And finally, the RadWindowManager on the Master.  Not much too it, but it is there!
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Style="z-index: 8000" />

    Any ideas?  Thanks all!
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 25 Oct 2013 Link to this post

    Hi Amanda,

    You could raise a flag when the alert is shown (an event from the RadWIndowManager can be used) and this flag can block the click handler that hides the RadWindow. Then, the flag can be reset in the callback function of the alert. Here is how I think this could be done:
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Style="z-index: 8000" OnClientBeforeShow="raiseAlertFlag" />
    function raiseAlertFlag(sender, args) {
        if (sender._isPredefined) {
            alertIsShown = true;
        }
    }
    var alertIsShown;
     
    function message(args) {
        //This is here to give RadWindow serverside a place to go.
        alertIsShown = false;
        if (lastWindowTitle == "EmpProj" && args == true) {
            alertWindowUp = true;
        }
    }
    function onClickHandler(e)
    {
        if (alertIsShown) return;
        var targedNodeName = e.target;
     
        if (lastOpenedWindow) {
            // If the RadWindow is clicked then do nothing ;
            if ($telerik.isMouseOverElementEx(lastOpenedWindow.get_popupElement(), e))
                return;
     
            lastOpenedWindow.close();
            lastOpenedWindow = null;
            lastWindowTitle = null;
     
            if (alertWindowUp == true) {
                lastWindowTitle = null;
                MenuOpenWindow("EmpProj");
                alertWindowUp = false;
            }
        }
    }

    I hope this idea will help you implement a flag that will let you perform such a check.

    Another approach would be to detach the body click handler when an alert is shown and to re-attach it when it closes (once again, through events from the manager, I have already shown the _isPredefined flag in the RadWIndow object that shows whether the popup is one of the predefined three dialogs (RadAlert, RadConfirm or RadPrompt).

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 25 Oct 2013 Link to this post

    Marin,

    Thanks for your help!

    As I'm debugging, I'm realizing that I'm calling the onClickHandler multiple times, so the internal 'alertWindowUp' is getting set to false, and then it runs the whole thing again...  And then will run it... AGAIN.  And even if I try to put a count in there, it eventually will beat the count I've got until it's closed the window.  Ugh!

    The grid in the window does have AJAX update controls, would that be affecting this?
  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 28 Oct 2013 Link to this post

    Hello Amanda,

    You would need to make sure the handler is reigstered only once. The pageLoad shortcut is called after each postback, including partial ones, so this can be the cause for your issue:
    <asp:UpdatePanel ID="Updatepanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" Text="text" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <script type="text/javascript">
        function pageLoad()
        {
            alert(1);
        }
    </script>

    You can consider checking whether a full or partial postback called the pageLoad function:
    function pageLoad(sender, args)
    {
        if (!args.get_isPartialLoad())
            alert(1);
    }


    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.
  6. Amanda
    Amanda avatar
    30 posts
    Member since:
    Aug 2012

    Posted 28 Oct 2013 Link to this post

    Marin,

    You have, once again, saved my sanity.  Thank you so much!  I just did as you suggested, and put in the partial load check, and it works like a charm!  <3
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017