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>
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>