UpdatePanelAnimationExtender for multiple UpdatePanels

Hi Friends,
I have 2 updatepanels on a page each having seperate telerik radtabstrip (type on demand tab) each tab having separate user control. I want to show loading image for respective tab click until the control load. I am using separate UpdatePanelAnimationExtender for each update panel. I am calling separate javascript for onupdating and onupdated call. However the image get load for all the panel instead of particular panel. I tried with condition script but no solution. Below is the code. I would appreciate it a lot if someone can help me!
<body>

    <form id="form1" runat="server">

    <asp:ToolkitScriptManager ID="trscrt" runat="server" EnablePageMethods="true" EnablePartialRendering="true">

    asp:ToolkitScriptManager>

    <script type="text/javascript" language="javascript">

        function onTabSelecting(sender, args) {

 

            if (args.get_tab().get_pageViewID()) {

                args.get_tab().set_postBack(false);

            }

            document.myPanel = args.get_tab().get_pageViewID();

        }

        //Mytab

        function onUpdating_Mytab() {

            var updateProgressDiv_Mytab = $get('DivProgressimg_mytab');

            updateProgressDiv_Mytab.style.display = '';

            var Targetcontrol = $get('RadTabStrip_Mytab');

            var TargetcontrolBound = Sys.UI.DomElement.getBounds(Targetcontrol);

            var updateProgressDivBound = Sys.UI.DomElement.getBounds(updateProgressDiv_Mytab);

            var x = 300;

            var y = 200;

 

            Sys.UI.DomElement.setLocation(updateProgressDiv_Mytab, x, y);

            

 

        }

        function onUpdated_Mytab() {

            var updateProgressDiv_Mytab = $get('DivProgressimg_mytab');

            updateProgressDiv_Mytab.style.display = 'none';

        }

 

        function onUpdating_Hot_Listing() {

            var updateProgressDiv_Hot_Listing = $get('DivProgressimg_Hot_Listing');

            updateProgressDiv_Hot_Listing.style.display = '';

            var Targetcontrol = $get('RadTabStrip_Hot_Listing');

            var TargetcontrolBound = Sys.UI.DomElement.getBounds(Targetcontrol);

            var updateProgressDivBound = Sys.UI.DomElement.getBounds(updateProgressDiv_Hot_Listing);

            var x = 300;

            var y = 500;

            Sys.UI.DomElement.setLocation(updateProgressDiv_Hot_Listing, x, y);

            

        }

        function onUpdated_Hot_Listing() {

            var updateProgressDiv_Hot_Listing = $get('DivProgressimg_Hot_Listing');

            updateProgressDiv_Hot_Listing.style.display = 'none';

        }

 

    script>

    <div>

 

        <asp:UpdatePanelAnimationExtender ID="Upae_mytab" runat="server"  

            TargetControlID="UpdatePanel_Mytab" >

            <Animations> 

            <OnUpdating>

            <Condition ConditionScript="document.myPanel == RadTabStrip_Mytab;">

            <ScriptAction Script="onUpdating_Mytab();" />  

            Condition>

            OnUpdating>

            <OnUpdated>   

            <Condition ConditionScript="document.myPanel == RadTabStrip_Mytab;">         

            <ScriptAction Script="onUpdated_Mytab();" />        

            Condition>    

            OnUpdated>    

            Animations>

        asp:UpdatePanelAnimationExtender>

 

        <asp:UpdatePanelAnimationExtender ID="upae_Hot_Listing" runat="server" TargetControlID="UpdatePanel_Hot_Listing">

            <Animations> 

             <OnUpdating>

             <Condition ConditionScript="document.myPanel == RadTabStrip_Hot_Listing;">

             <ScriptAction Script="onUpdating_Hot_Listing();" /> 

             Condition> 

             OnUpdating>

             <OnUpdated>     

             <Condition ConditionScript="document.myPanel == RadTabStrip_Hot_Listing;">       

             <ScriptAction Script="onUpdated_Hot_Listing();" />  

             Condition>          

             OnUpdated>    

            Animations>

        asp:UpdatePanelAnimationExtender>

 

        <div id="divMain">

            <asp:UpdatePanel ID="UpdatePanel_Mytab" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">

                <ContentTemplate>

                    <div class="bottomSheetFrame">

                        <table>

                            <tr>

                                <td>

                                    <%--For Tab--%>

                                    <telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip_Mytab"

                                        SelectedIndex="0" runat="server" Width="680px" MultiPageID="RadMultiPage_Mytab"

                                        CssClass="idTabs" EnableEmbeddedSkins="false" OnTabClick="RadTabStrip_Mytab_TabClick"

                                        Orientation="HorizontalBottom">

                                    telerik:RadTabStrip>

                                    <div align="center" id="DivProgressimg_mytab" style="display: none;">

                                        <img id="imgmytab" runat="server" alt="Processing" title="Processing" align="middle"

                                            src="Images/loading.gif" />

                                    div>

                                    <%--For content--%>

                                    <telerik:RadMultiPage ID="RadMultiPage_Mytab" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage_Mytab_PageViewCreated"

                                        CssClass="multiPage">

                                    telerik:RadMultiPage>

                                td>

                            tr>

                        table>

                    div>

                ContentTemplate>

            asp:UpdatePanel>

        div>

 

    <div id="divMainHot_Listing">

        <asp:UpdatePanel ID="UpdatePanel_Hot_Listing" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">

            <ContentTemplate>

                <div class="bottomSheetFrame" id="DivProgressimg_Hot_Listing1">

                    <table>

                        <tr>

                            <td align="center" valign="top" style="height: 350px;">

                                <%--For Tab--%>

                                <telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" ID="RadTabStrip_Hot_Listing"

                                    SelectedIndex="0" runat="server" Width="650px" MultiPageID="RadMultiPage_Hot_Listing"

                                    CssClass="idTabs" EnableEmbeddedSkins="false" OnTabClick="RadTabStrip_Hot_Listing_TabClick"

                                    Orientation="HorizontalBottom">

                                telerik:RadTabStrip>

                                <div align="center" id="DivProgressimg_Hot_Listing" style="display: none;">

                                    <img id="imghotlisting" runat="server" alt="Processing" title="Processing" align="middle"

                                        src="Images/loading.gif" />

                                div>

                                <%--For content--%>

                                <telerik:RadMultiPage ID="RadMultiPage_Hot_Listing" runat="server" SelectedIndex="0"

                                    OnPageViewCreated="RadMultiPage_Hot_Listing_PageViewCreated" CssClass="multiPage">

                                telerik:RadMultiPage>

                            td>

                        tr>

                    table>

                div>

            ContentTemplate>

        asp:UpdatePanel>

    div>

 

    div>

    form>

body>
1 Reply

Know the answer? Post it — somebody with the same question will find it here.
Suthish Nair16y ago
Accepted answer
i will suggest to wrap all your controls in single UpdatePanel, this not an efficient way.

But you can avoid all the extra line of codings..
```
 
     
       Loading...

     
     
         .......................
     

 
 
```