This is a migrated thread and some comments may be shown as answers.

[Solved] show the loading panel next to AJAX initiator

1 Answer 111 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Alex asked on 05 Aug 2009, 03:22 AM

Hi All,
I have Loading Panel control in my page. I have RadGrid. There are search button on top of the grid and some grid command item. I want to show the loading panel next to AJAX initiator, button, etc. Following is my code. But Loading Panel is always show on top and centre of Panel "Panel1". How do i positioning my Loading Panel?

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<telerik:AjaxSetting AjaxControlID="rgFCCOffice">

<telerik:AjaxUpdatedControl ControlID="Panel1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rtbtnFilter">

<telerik:AjaxUpdatedControl ControlID="Panel1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Panel ID="Panel1" runat="server">

<telerik:RadGrid ID="rgFCCOffice" runat="server" AllowPaging="True" AllowSorting="True"

AutoGenerateColumns="False" Skin="Office2007"

Width="97%" ShowStatusBar="True"

AutoGenerateEditColumn="false"

onneeddatasource="rgFCCOffice_NeedDataSource"

onitemdatabound="rgFCCOffice_ItemDataBound"

oninsertcommand="rgFCCOffice_InsertCommand"

onupdatecommand="rgFCCOffice_UpdateCommand" ShowFooter="false"

AllowMultiRowSelection="True" CellPadding="1" CellSpacing="1">

</telerik:RadGrid>

</asp:Panel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />

</telerik:RadAjaxLoadingPanel>

function RequestStart(sender, eventArgs) {

var divElementStyle = document.getElementById("<%=RadAjaxLoadingPanel1.ClientID%>").style;

divElementStyle.position = 'absolute';

//position the loading panel

divElementStyle.left = eventArgs.get_eventTargetElement().offsetLeft + "px";

divElementStyle.top = eventArgs.get_eventTargetElement().offsetTop + "px";

}

</script>

[Solved] show the loading panel next to AJAX initiator

1 Answer, 1 is accepted