AjaxLoadingPanel showing extra image on top of the form

2 posts, 0 answers
  1. Rishi
    Rishi avatar
    42 posts
    Member since:
    Feb 2010

    Posted 22 May 2014 Link to this post

    Hi I am trying to show the AjaxLoadingPanel on top the controls when the ajax update is being performed... the images are showing up correctly on every control that is being updated but an extra image is also shown on top of the form and i am not able to get rid of that (screen shot attached)

    I hope some one can help with this... here is the code i am using 


    <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tr>
          <td>

    <asp:Panel ID="pnlAddEdit" runat="server">
    <telerik:RadAjaxLoadingPanel runat="server" ID="raLoadingPanel" BackgroundPosition="Center" Transparency="30">
    <div>
    <img src="~/images/loading.ring.dots.gif" alt="" />
    </div>
    </telerik:RadAjaxLoadingPanel>
      <table cellpadding="3px" cellspacing="0px" border="0px">
    <tr>
    <td class="required" width="150px">xxx: </td>
    <td width="275px">
    ..... </td>
    <td />
    <td width="150px">Status:</td>
    <td width="275px">
    ....

    </td>
    </tr>

    <tr>
    <td class="required" width="150px">xxx: </td>
    <td Height="20px" width="280px">
    <telerik:RadComboBox AllowCustomText="false" Width="250px" ID="ddlxxx" runat="server" EmptyMessage="Select xxx" DropDownWidth="250px"
    CausesValidation="false" AutoPostBack="true" OnSelectedIndexChanged="ddlxxx_SelectedIndexChanged" SkinID="Default"/>
    </td>
    <td />
    <td class="required">yyy: </td>
     <td Height="20px">
     <asp:Panel runat="server" ID="pnlyyy">
    <telerik:RadComboBox DropDownWidth="250px" Width="250px" ID="ddlyyy" AutoPostBack="true" OnSelectedIndexChanged="ddlyyy_SelectedIndexChanged" runat="server" EmptyMessage="Select yyy" CausesValidation="false" AllowCustomText="false" SkinID="Default" />

    </td>
    </tr>
    <tr>
    ....
    </tr>

    <tr>
    <td class="required" width="150px">zzz: </td>
    <td Height="20px">
    <asp:Panel ID="pnlzzz" runat="server">
    <telerik:RadComboBox ID="ddlzzz" Width="250px" DropDownWidth="250px" runat="server" OnSelectedIndexChanged="ddlzzz_SelectedIndexChanged" OnItemDataBound="ddlzzz_ItemDataBound" AutoPostBack="true" CausesValidation="false" EmptyMessage="Select zzz" SkinID="Default" AllowCustomText="false"/>
    </asp:Panel>
    </td>
    <td />
    <td class="required">aaa: </td>
     <td Height="20px">
     <asp:Panel ID="pnlaaa1" runat="server">
    <telerik:RadComboBox ID="ddlaaa1" Width="250px" runat="server" EmptyMessage="Select aaa1" CausesValidation="false" DropDownWidth="250px"
    SkinID="Default" AllowCustomText="false" OnItemDataBound="ddlaaa1_ItemDataBound" />

    </asp:Panel>
    <div ID="pnlaaa2" runat="server">

    </div>
    </td>
    </tr>

    </table>
    </asp:Panel>

    </table>

    <telerik:RadAjaxManager ID="ramMain" runat="server">
    <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="ddlxxx">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="ddlyyy" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block" />
    <telerik:AjaxUpdatedControl ControlID="ddlzzz" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block" />
    <telerik:AjaxUpdatedControl ControlID="pnlaaa1" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block"  />
    <telerik:AjaxUpdatedControl ControlID="pnlaaa2" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block"  />
    </UpdatedControls>
    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="ddlyyy">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="ddlzzz" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block"  />
    <telerik:AjaxUpdatedControl ControlID="pnlaaa1" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block"  />
    <telerik:AjaxUpdatedControl ControlID="pnlaaa2" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block"  />
    </UpdatedControls>
    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="ddlzzz">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="pnlaaa1" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block"  />
    <telerik:AjaxUpdatedControl ControlID="pnlaaa2" LoadingPanelID="raLoadingPanel" UpdatePanelRenderMode="Block"  />
    </UpdatedControls>
    </telerik:AjaxSetting>
    </AjaxSettings>  
    </telerik:RadAjaxManager>
  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 27 May 2014 Link to this post

    Hi Rishi,

    Could you please verify that you do not have any external css styles which position some of the elements on the page? I tried to reproduce the described issue on my side but to no avail. I am sending you a simple example which is based on your code. Please check it out and let me know what differs in your case.

    Looking forward for your reply.

    Regards,
    Radoslav
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top