Need a modal radWindow generated from User Control

[PTSDev]

I've been trying everything I can think of to get this working...

Basically I've got a web page which loads user controls dynamically.

On the user controls, I'm using the radAjaxManagerProxy successfully.  However, when I create a radWindow from one of them, I cannot find a way to create the Ajax event on the containing page which will load the radAjaxLoadingPanel to cover all of the items on the containing page.  So the radWindow is not truly modal; I can still click on radMenu items above the user controls.

I thought about putting the radWindow in the containing page, but I don't want the user controls to have to be aware of its presence should things change.

Any help would be greatly appreciated.  I've gone through a ton of samples, but couldn't find anything that really fit my scenario.

Thanks!

[Viktor Tachev]

Hello Glen,

If I understand correctly you are not getting an Ajax request from the user control page or you get an Ajax request but the loading panel is not showing. Could you check for a JavaScript error that could be causing this behavior. Additionally if an Ajax request is being fired and the loading panel is not displayed you could try showing it explicitly as illustrated in this article.

On a side note if you would like to display the RadAjaxLoadingPanel over the whole page you could use a code library located here.

If I have misunderstood and this is not your case could you elaborate more on your scenario? Could you also share full source code for your page and the code-behind file? That will enable us and anyone who would like to help to better understand your case.

Regards,

Victor Tachev

Telerik

[PTSDev]

Hi Viktor,

Thanks for the suggestions, but I think something else is going on.  As you will notice from the attached file, most of the RadPanelBar (which is contained in an ASP panel) is covered by the RadAjaxLoadingPanel, but the RadMenu in the HeaderTemplate is not.
I'm a bit hesitant to post the entire code as this seems like a bug, but will if you can't reproduce it.  Here's a snippet:

<tk:RadAjaxManager ID="ramMainControl" runat="server">
        <AjaxSettings>
            <tk:AjaxSetting AjaxControlID="pnlSysData">
                <UpdatedControls>
                    <tk:AjaxUpdatedControl ControlID="pnlInfo" LoadingPanelID="ralpProductionAdjustFunction" />
                    <tk:AjaxUpdatedControl ControlID="pnlProdData" LoadingPanelID="ralpProductionAdjustFunction" />
                </UpdatedControls>
            </tk:AjaxSetting>
            <tk:AjaxSetting AjaxControlID="pnlProdData">
                <UpdatedControls>
                    <tk:AjaxUpdatedControl ControlID="pnlInfo" LoadingPanelID="ralpProductionAdjustFunction" />
                    <tk:AjaxUpdatedControl ControlID="pnlSysData" LoadingPanelID="ralpProductionAdjustFunction" />
                </UpdatedControls>
            </tk:AjaxSetting>
            <%--<tk:AjaxSetting AjaxControlID="rmAdjustmentFn">
                <UpdatedControls>
                    <tk:AjaxUpdatedControl ControlID="rapUserControls" LoadingPanelID="ralpProductionAdjustFunction" />
                </UpdatedControls>
            </tk:AjaxSetting>--%>
        </AjaxSettings>
    </tk:RadAjaxManager>
    <tk:RadAjaxLoadingPanel ID="ralpProductionAdjustFunction" runat="server">
    </tk:RadAjaxLoadingPanel>
    <br />
    <br />
    <%--<tk:RadAjaxPanel runat="server" ID="rapInfoPanel" EnableAJAX="true">--%>
    <asp:Panel runat="server" ID="pnlInfo">
        <tk:RadPanelBar runat="server" ID="rpbPageInfo" Width="800" Skin="Telerik" ExpandMode="MultipleExpandedItems"
            OnClientLoad="onLoad">
            <Items>
                <tk:RadPanelItem Expanded="true" CssClass="top-offers" Text="Why/When To Use This Feature">
                    <HeaderTemplate>
                        <tk:RadMenu runat="server" ID="rmAdjustmentFn" OnItemClick="rmAdjustmentFn_ItemClick"
                            OnClientItemClicked="onItemClicked" Skin="Telerik">
                            <Items>
                                <tk:RadMenuItem Text="Simple IMR Adjustment" />
                                <tk:RadMenuItem Text="Simple Meter Swapout" />
                                <tk:RadMenuItem Text="Delete Production Rows" />
                                <tk:RadMenuItem Text="Full Featured Production Adjustment" />
                            </Items>
                        </tk:RadMenu>
                    </HeaderTemplate>
                </tk:RadPanelItem>
                <tk:RadPanelItem Text="Why/When To Use This Feature" Expanded="false">
                    <ContentTemplate>
                        <br />
                        <tk:RadMultiPage runat="server" ID="rmpWhyWhen" SelectedIndex="0" CssClass="multiPage">
                            <tk:RadPageView runat="server" ID="rpvImrInfoHeader" Height="80px" Style="padding-top: -50px;
                                margin: -22px 4px 4px 4px">
                                <div style="font-weight: bold">
                                    <%--Eventually put the info panel messages in the DB--%>
                                    <asp:Label runat="server" ID="lblWhyToUseImrHead" Text="Here's why you should use the Simple IMR Adjustment feature and when:<br />" />
                                </div>
                                <ul class="rpvInfo">
                                    <li>
                                        <div>
                                            <asp:Label runat="server" ID="lblWhyToUseImrMain" Text="Use this screen to adjust an initial meter reading (IMR) on a system with no previously reported production." />
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <asp:Label runat="server" ID="lblWhyToUseImrMain2" Text="The IMR is the reading on the date in service (DIS).  This is the date of interconnection approval by the utility." />
                                        </div>
                                    </li>
                                </ul>
                            </tk:RadPageView>
                            <tk:RadPageView runat="server" ID="rpvSimpleMeterSwapoutInfoHead" Style="padding-top: -50px;
                                margin: -22px 4px 4px 4px">
                                <div style="font-weight: bold">
                                    <%--Eventually put the info panel messages in the DB--%>
                                    <asp:Label runat="server" ID="lblWhyToUseMeterSwapoutHead" Text="Here's why you should use the Simple Meter Swapout feature and when:<br />" />
                                </div>
                                <ul class="rpvInfo">
                                    <li>
                                        <div>
                                            <asp:Label runat="server" ID="lblWhyToUseMeterSwapoutMain" Text="Use this screen to perform a simple meter swapout." />
                                        </div>
                                    </li>
                                </ul>
                            </tk:RadPageView>
                            <tk:RadPageView runat="server" ID="rpvDelProdRowsHead" Style="padding-top: -50px;
                                margin: -22px 4px 4px 4px" Enabled="false">
                                <div style="font-weight: bold">
                                    <%--Eventually put the info panel messages in the DB--%>
                                    <asp:Label runat="server" ID="lblWhyToUseDelProdRowsHead" Text="Here's why you should use the Delete Production Rows feature and when:<br />" />
                                </div>
                                <ul class="rpvInfo">
                                    <li>
                                        <div>
                                            <asp:Label runat="server" ID="lblWhyToUseDelProdRows" Text="Use this screen to delete contiguous rows up to the current record." />
                                        </div>
                                    </li>
                                </ul>
                            </tk:RadPageView>
                            <tk:RadPageView runat="server" ID="rpvFullProdEditInfoHead" Style="padding-top: -50px;
                                margin: -22px 4px 4px 4px" Enabled="false">
                                <div style="font-weight: bold">
                                    <%--Eventually put the info panel messages in the DB--%>
                                    <asp:Label runat="server" ID="lblWhyToUseFullProdEditHead" Text="Here's why you should use the Full Production Editing feature and when:<br />" />
                                </div>
                                <ul class="rpvInfo">
                                    <li>
                                        <div>
                                            <asp:Label runat="server" ID="lblWhyToUseFullProdEditMain" Text="Use this screen for full production editing capabilities.  [CAUTION] Use this screen sparingly and at your own discretion." />
                                        </div>
                                    </li>
                                </ul>
                            </tk:RadPageView>
                        </tk:RadMultiPage>
                    </ContentTemplate>
                </tk:RadPanelItem>
                <tk:RadPanelItem Text="How To Use This Feature" Expanded="false">
                    <ContentTemplate>
                        <tk:RadMultiPage runat="server" ID="rmpHow" SelectedIndex="0" CssClass="multiPage">
                            <tk:RadPageView runat="server" ID="rpvImrHow">
                                <ul class="productList">
                                    <li>
                                        <div>
                                            <asp:Label runat="server" ID="lblHowToUseImrMain" Text="First, select the system for which you wish to change the IMR." />
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <asp:Label ID="Label2" runat="server" Text="Click on a column header to sort" />
                                        </div>
                                    </li>
                                </ul>
                            </tk:RadPageView>
                            <tk:RadPageView runat="server" ID="rpvMeterSwapoutHow">
                                <ul class="productList">
                                    <li>
                                        <div>
                                            <asp:Label runat="server" ID="Label3" Text="First, select the system for which you wish to swap out meters." />
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <asp:Label ID="Label4" runat="server" Text="Click on a column header to sort systems." />
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <asp:Label ID="Label5" runat="server" Text="Next, enter the old meter reading value, the new meter reading value and the date and time on which the swap was performed." />
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <asp:Label ID="Label6" runat="server" Text="Please note that the date and time must be the same for both readings for this simple scenario." />
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <asp:Label ID="Label7" runat="server" Text="Finally, enter the most current meter reading and the date and time of the reading for the new meter, and click 'Submit'." />
                                        </div>
                                    </li>
                                </ul>
                            </tk:RadPageView>
                            <tk:RadPageView runat="server" ID="rpvDelProdRowsHow">
                                <ul class="productList">
                                    <li>
                                        <asp:Label runat="server" ID="Label1" Text="Here's how you can use this feature:<br />" />
                                    </li>
                                </ul>
                            </tk:RadPageView>
                            <tk:RadPageView runat="server" ID="rpvFullProdEditHow">
                                <ul class="productList">
                                    <li>
                                        <asp:Label runat="server" ID="Label8" Text="Here's how you can use this feature:<br />" />
                                    </li>
                                </ul>
                            </tk:RadPageView>
                        </tk:RadMultiPage>
                    </ContentTemplate>
                </tk:RadPanelItem>
            </Items>
        </tk:RadPanelBar>
    </asp:Panel>

So I am in fact getting the Ajax request since most of the panel is covered.  Is there something special I need to do for the HeaderTemplate or RadMenu?

Thanks,

Glen

[Viktor Tachev]

Hi Glen,

If despite that the RadWindow is set as Modal the RadMenu is still active, this is most likely due to the z-index of the controls. By default the z-index for RadWindow is lower than the z-index for the RadMenu control. This causes the RadMenu to be displayed over the Window. In order to change this behavior you could modify the z-index of the controls so that the value is lower for the RadMenu control. You could find information about the z-index values for different RadControls here. Also more information on the z-index property is available in this article.

Take a look at the attached sample project and see if it works for you. In the project i have set the z-index for the RadWindow with id ="modalPopup" to be higher than the default z-index value for RadMenu control. This is done with little css:

#modalPopup {
            z-index: 7001;
        }

It is working as expected on my side - the RadWindow is displayed over the Menu. You could activate the window with a click of a button.

You should not have this issue with RadAjaxloadingPanel as it's z-index is higher than the one for RadMenu.

Note that when changing the z-index for a control it could be displayed over or under other elements in the page depending on their z-index values.

Give this approach a try and you should get the result you are looking for.

Regards,

Victor Tachev

Telerik