[Solved] AjaxLoadingPanel shows up twice

[Gaurav]

Hi,

I am having problem using AjaxLoadingPanel. It shows up twice, 1st at above updated control (it is desirable) and 2nd time parallel to 1st at top left corner of the screen.

Design:

<table cellpadding="0" cellspacing="0" border="0" width="100%" runat="Server" id="Table4">
                                                            <tr>
                                                                <td style="text-align: left" width="40%">
                                                                    <asp:Label ID="lblSubTitle" runat="server" CssClass="SubTitle" Text="Summary"></asp:Label></td>
                                                                <td style="text-align: right;">

                                                                </td>
                                                                <td style="text-align: right;" valign="middle">

                                                                </td>
                                                                <td style="text-align: right; display: none;" valign="middle">

                                                                </td>
                                                                <td width="270px" style="text-align: right;">

                                                                    <table cellpadding="0" cellspacing="0" border="0" id="tableSearch" runat="server"
                                                                        width="100%">
                                                                        <tr>
                                                                            <td width="50%" style="text-align: left;">
                                                                                <asp:DropDownList Width="120px" ID="ddlFieldName" runat="server" CssClass="clsBtnControl"
                                                                                    Font-Size="8pt" AutoPostBack="True" OnSelectedIndexChanged="ddlFieldName_SelectedIndexChanged">
                                                                                    <asp:ListItem Selected="True" Value="-Select-">-Select-</asp:ListItem>
                                                                                    <asp:ListItem Value="mf">MF Name</asp:ListItem>
                                                                                    <asp:ListItem Value="tfname">Client Name</asp:ListItem>
                                                                                    <asp:ListItem Value="estab_date">Est. Date</asp:ListItem>
                                                                                </asp:DropDownList>
                                                                            </td>
                                                                            <td id="tdSearch" runat="server" style="text-align: center;">
                                                                                <asp:TextBox ID="txtSearch" runat="server" Width="130px" CssClass="clsBtnControl"
                                                                                    Font-Size="8pt"></asp:TextBox>
                                                                            </td>
                                                                            <td id="tdSetupDate" runat="server" style="display: none; padding-top: 3px; text-align: center;">
                                                                                <radCln:RadDatePicker ID="rdSetupDate" runat="server" Calendar-Skin="Default2006"
                                                                                    MaxDate="2099/1/1" MinDate="1960/1/1" SharedCalendarID ="RadCalendar1"  UseEmbeddedScripts="false"
                                                                                    Width="97%">
                                                                                </radCln:RadDatePicker>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                                <td valign="bottom" align="center" style="padding-bottom: 1px;">
                                                                    <asp:ImageButton ID="btnsearch1" runat="server" ImageUrl="~/Images/New Button Image/go.gif"
                                                                         />
                                                                </td>
                                                                <td valign="bottom" align="center" id="TDsearchall" runat="server" style="padding-bottom: 1px;">
                                                                    <asp:ImageButton ID="btnShowall" runat="server" ImageUrl="~/Images/New Button Image/btn-all1.gif"
                                                                         />
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td colspan="3">
                                                                </td>
                                                                <td>

                                                                    <table cellpadding="0" cellspacing="0" width="100%">
                                                                        <tr>
                                                                            <td width="50%">
                                                                                &nbsp;
                                                                            </td>
                                                                            <td style="text-align: center;">
                                                                                <asp:Label ID="lblsearchdate" runat="server" Text="dd/mm/yyyy" Style="display: none;"></asp:Label>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                                <td colspan="2">
                                                                </td>
                                                            </tr>
                                                        </table>

Ajax Setting:

<rada:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            runat="server" UseEmbeddedScripts="false"  >
            <AjaxSettings>
                <rada:AjaxSetting AjaxControlID="tableSearch" >
                    <UpdatedControls >
                        <rada:AjaxUpdatedControl ControlID="tableSearch"  />
                        <rada:AjaxUpdatedControl ControlID="tdSearch" LoadingPanelID ="LoadingPanelSearch" />
                        <rada:AjaxUpdatedControl ControlID="tdSetupDate" LoadingPanelID ="LoadingPanelSearch" />
                        <rada:AjaxUpdatedControl ControlID="lblsearchdate"  LoadingPanelID ="LoadingPanel2" />
                    </UpdatedControls>
                </rada:AjaxSetting>
            </AjaxSettings>
        </rada:RadAjaxManager>
        <rada:AjaxLoadingPanel ID="LoadingPanel1" runat="server" InitialDelayTime="0" Transparency="30">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/RadControls/AJAX/Skins/Default/Loading.gif"
                BorderWidth="0px" AlternateText="Loading..."></asp:Image>
        </rada:AjaxLoadingPanel>
        <rada:AjaxLoadingPanel ID="LoadingPanelSearch" runat="server" InitialDelayTime="0"
            Transparency="0"   >
            <asp:Image ID="Image2" runat="server" ImageUrl="~/RadControls/AJAX/Skins/Default/loading1.gif"
                BorderWidth="0px" AlternateText="Loading..."></asp:Image>
        </rada:AjaxLoadingPanel>
        <rada:AjaxLoadingPanel ID="LoadingPanel2" runat="server" InitialDelayTime="0" Transparency="0">
        </rada:AjaxLoadingPanel>
        <radCln:RadCalendar ID="RadCalendar1" runat="server" Skin="Default2006" UseEmbeddedScripts="false"
           Visible ="false" >
            <SpecialDays>
                <radCln:RadCalendarDay Repeatable="Today" Date="">
                    <ItemStyle BackColor="yellow"></ItemStyle>
                </radCln:RadCalendarDay>
            </SpecialDays>
        </radCln:RadCalendar>

Please let me know what is wrong with these setting. I want to display Loading Panel on Update control.

Thanks,
Gaurav

[Gaurav]

Hi,

Here is code-behind:

protected void ddlFieldName_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (ddlFieldName.SelectedItem.Value == "estab_date")
            {
                lblsearchdate.Style.Add(HtmlTextWriterStyle.Display, "");
                tdSearch.Style.Add(HtmlTextWriterStyle.Display, "none");
                tdSetupDate.Style.Add(HtmlTextWriterStyle.Display, "");
            }
            else
            {
                tdSearch.Style.Add(HtmlTextWriterStyle.Display, "");
                txtSearch.Text = "";
                tdSetupDate.Style.Add(HtmlTextWriterStyle.Display, "none");
                lblsearchdate.Style.Add(HtmlTextWriterStyle.Display, "none");

            }
        }
        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {

        }

Thanks,
Gaurav

[Pavlina]

Hi Gaurav,

I suggest that you modified your AjaxSettings as shown bellow and see if it makes any difference:
ASPX:

<rada:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            runat="server" UseEmbeddedScripts="false"  >
            <AjaxSettings>
                <rada:AjaxSetting AjaxControlID="tableSearch" >
                    <UpdatedControls >
                        <rada:AjaxUpdatedControl ControlID="tableSearch" LoadingPanelID ="LoadingPanelSearch" />
                        <rada:AjaxUpdatedControl ControlID="lblsearchdate"  LoadingPanelID ="LoadingPanel2" />
                    </UpdatedControls>
                </rada:AjaxSetting>
            </AjaxSettings>
        </rada:RadAjaxManager>

Additionally, please note that it is not suggested to set as updated control in AjaxSettings <td> elements.

All the best,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Gaurav]

Hello,

Thanks for your reply.

Actually I have tried the solution earlier before posting here. But problem is that due to these Ajax settings drop down also hide/show behind Loading Panel.

Desire result would be:

Loading Panel should replace only those<td> which hide/show as per drop down selected item. All other element of the row should remains as it is.

As you mentioned in your reply : "Additionally, please note that it is not suggested to set as updated control in AjaxSettings <td> elements." Do you see any workaround to achieve the desired result.

Please let me know.

Best Regards & Thanking you,
Gaurav

[Pavlina]

Hello Gaurav,

To display the loading panel over an element,I suggest that you call the Show method client-side. This allows you to conditionally display loading panel over updated control (Show the panel in OnRequestStart, hide it in OnResponcseEnd).
Find more information about how to achieve this behavior in the following help topic:
Show and hide loading panel explicitly

Regards,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.