How to use UpdatePanelAnimationExtender for multiple UpdatePanels

Question

2.00/5 (2 votes)

See more:

I have 2 update panels 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!

XML

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

Posted 2-Nov-10 5:30am

vmuthukumar07

Updated 3-Nov-10 0:46am

LittleYellowBird

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)