Multiple UpdateProgress controls

Question

I've been working on this sissue for several days and have not been able to get it working.

I have an application where I use multiple gridviews on same page. For each gridview I need to show update progress and since I'm using external triggers I am not able to display progress control in my Java Script. Can someone please help me out?

<script type="text/javascript">
  window.onload = function() {
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      if (prm != null) {
          prm.add_beginRequest(function(sender, args) {
              var gridView = document.getElementById("<%=GridView2.ClientID %>");
              if (gridView != null) {
                  document.getElementById("<%=GridView2.ClientID %>").style.display = 'none';
              }
              var pbControl = null;
              pbControl = args.get_postBackElement();
              if (pbControl.id == "ctl00_ContentPlaceHolder1_TabContainer1_TabPanel1_DropDownList3") {
               alert("DropDownList3 - is the post back element");
               document.getElementById("<%=UpdateProgress1.ClientID %>").style.display = '';
              }
          });
          prm.add_endRequest(function(sender, args) {
          document.getElementById("<%=GridView2.ClientID %>").style.display = '';

          });
      }
  }   

<cc1:TabContainer ID="TabContainer1" runat="server" Height="20px" ActiveTabIndex="0">
                <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Current Shift" Style="font-size: xxx-small"
                    BackColor="AliceBlue">
                    <HeaderTemplate>
                        Current Shifts
                    </HeaderTemplate>
                    <ContentTemplate>
                        <br />
                        <div style="height: 30px; left: 4px; top: 30px; width: 516px; position: absolute;
                            background-color: #ffffcc; z-index: 102;">
                            <asp:Label ID="Label1" runat="server" Style="top: 6px; left: 7px; position: absolute;
                                z-index: 100;" CssClass="labellayout" Text="Plant:" />
                            <asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" CssClass="dropdownlistlayout"
                                Style="width: 140px; top: 5px; left: 37px; position: absolute; z-index: 101;">
                            </asp:DropDownList>
                            <asp:Button ID="Button4" runat="server" CssClass="buttonlayout" Style="left: 476px;
                                top: 6px;" Text="Export" Width="36px" />
                        </div>
                        <asp:Panel ID="Panel4" runat="server" CssClass="panellayout" Style="top: 60px; height: 201px;
                            width: 518px; left: 2px; border: none">

                           <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChanged" />
                                </Triggers>
                                <ContentTemplate>
                            <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server" DynamicLayout="false">
                                        <ProgressTemplate>
                                            <br />
                                            <asp:Image ID="Image01" runat="server" ImageUrl="Icons/ajax-loader.gif" />
                                            <asp:Label ID="Label01" runat="server" CssClass="labellayout6" Text="Loading data...."></asp:Label>
                                        </ProgressTemplate>
                                    </asp:UpdateProgress>

                                    <asp:GridView ID="GridView2" runat="server" CssClass="gridviewlayout1" Style="overflow: hidden;
                                        clip: rect(auto auto auto auto); left: 3px; position: absolute; top: 5px" Width="512px"
                                        AllowPaging="True" AllowSorting="True" Font-Size="X-Small" AutoGenerateColumns="False"
                                        CellSpacing="2" HorizontalAlign="Left" BorderColor="LightGray" BorderStyle="None"
                                        PageSize="6" EmptyDataText="No Records Found" Height="19px" ShowFooter="True">
                                        <Columns>