I have an application where I have multiple gridviews on same page and when I load the gridviews I need to show UpdateProgress control for each one. Since I am using external triggers I am trying to show the UpdateProgress control in Java Script. But it is now working for me. I have attached code snippet and maybe someone will be able to assist me:
Code:
<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 = '';
});
}
}
</script>
Code:
<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>
Comment