Keeping RadWindow open after RadAlert 'Ok'

[Amanda]

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!

[Marin Bratanov]

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

[Amanda]

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?

[Marin Bratanov]

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

[Amanda]

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