RadAjax for ASP.NET
Contents
Show the loading panel next to AJAX initiator Send comments on this topic.
AJAX Loading Panel > AJAX Loading Panel How-To > Show the loading panel next to AJAX initiator

Glossary Item Box

Sometimes people may want to show the loading panel on a specific position, like right next to the AJAX initiator for example. When you have a complex control, e.g. tabstrip, it could be better to show the loading over the clicked tab (say the tabstrip is updated itself via AJAX) instead of showing it on one and the same place.

In order to achieve that you can use a Sticky loading panel (set IsSticky to "true") and set the loading panel position at OnRequestStart event, using the event arguments' EventTargetElement attributes. Below is a sample code you can use and modify according to your exact needs. There are some standard controls (for simplicity) which are ajaxified and update a label control in this example.

There is just one tricky thing here (the first line from the following RequestStart function) - we clear the displayed loading panels cache, otherwise the first loading panel position will be used on each subsequent request. Then we change left and top attributes of loading panel element style according to the offset of the event target in this case.

JavaScript Copy Code
  <script type="text/javascript">
         function RequestStart(sender, eventArgs)
        {
            //clear the loading panels cache
            AjaxNS.DisplayedLoadingPanels = [];

            var divElementStyle = document.getElementById("AjaxLoadingPanel1").style;
            divElementStyle.position = 'absolute';

            //position the loading panel
            divElementStyle.left = eventArgs.EventTargetElement.offsetLeft;
            divElementStyle.top = eventArgs.EventTargetElement.offsetTop;
        }
    </script>

        <rad:radajaxmanager id="RadAjaxManager1" runat="server">
            <ClientEvents OnRequestStart="RequestStart"></ClientEvents>
            <AjaxSettings>
                <rad:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <rad:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="AjaxLoadingPanel1" />
                    </UpdatedControls>
                </rad:AjaxSetting>
                <rad:AjaxSetting AjaxControlID="Button2">
                    <UpdatedControls>
                        <rad:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="AjaxLoadingPanel1" />
                    </UpdatedControls>
                </rad:AjaxSetting>
                <rad:AjaxSetting AjaxControlID="CheckBox1">
                    <UpdatedControls>
                        <rad:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="AjaxLoadingPanel1" />
                    </UpdatedControls>
                </rad:AjaxSetting>
            </AjaxSettings>
        </rad:radajaxmanager>
        <rad:ajaxloadingpanel id="AjaxLoadingPanel1" runat="server" height="75px" width="75px" IsSticky="True" MinDisplayTime="500">
            <asp:Image id="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif"></asp:Image>
        </rad:ajaxloadingpanel>

        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" width="100px"/>
        <asp:Label ID="Label1" runat="server" Text="Label" style="z-index: 103; left: 137px; position: absolute; top: 255px"></asp:Label>
        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" Text="check box" />
        <asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="Button2" width="100px"/>
 

On button and checkbox click events we just update the label server-side.