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>