I have two UpdatePanel(tvUpdatePanel and tvResultUpdatePanel) on one page, as you can see in the image, the first UpdatePanel contains a text box and a button, the second updatepanel contains three GridViews below(For designing purpose, i have to put these two parts seperately). I've set both UpdatePanel's UpdateMode to "Always". I encountered a strange thing: when clicking "next page" of the gridviews or the "search" button, the three Gridviews will disappear from the page. I have to click the "Tailored View" tab then the GridViews show again. The next page or search function are working well. Why is this happening? How to fix this? Thanks!
<asp:UpdatePanel ID="tvUpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<div id="TailoredViewTab" style="display: normal">
<%--<uc4:TailoredView runat="server" id="TailoredView" />--%>
<div class="div_options" style="margin-top: 10px; font-style: italic;">
Complete code search criteria below and click <b>SEARCH</b> button.
</div>
<asp:DropDownList ID="geographicalAreasDropDownList" runat="server" Width="100px" Height="20px"
Style="display: none; margin-left: 0px; margin-top: 5px"
DataSourceID="geographicalAreaSqlDataSource"
DataTextField="Description"
DataValueField="ID" />
<ajaxToolkit:HoverMenuExtender ID="hme4ga" runat="server"
TargetControlID="geographicalAreasDropDownList"
PopupControlID="gaHoverPanel"
PopupPosition="Bottom"
HoverDelay="0"
OffsetX="0"
OffsetY="10"
PopDelay="0">
</ajaxToolkit:HoverMenuExtender>
<asp:DropDownList ID="newsAreasDropDownList" runat="server" Height="20px"
DataSourceID="newsAreasSqlDataSource"
DataTextField="Description"
DataValueField="ID"
Style="display: none; margin-left: 60px; margin-top: -15px" Width="200px" />
<ajaxToolkit:HoverMenuExtender ID="hme4na" runat="server"
TargetControlID="newsAreasDropDownList"
PopupControlID="naHoverPanel"
PopupPosition="Bottom"
OffsetX="0"
OffsetY="10"
PopDelay="0">
</ajaxToolkit:HoverMenuExtender>
<asp:TextBox ID="tvSearchTbx" runat="server" Text="" Height="20px" CausesValidation="true"
onkeypress="return UserPressKeyOnTVTB(event);"
Style="margin-left: 0px; margin-top: -20px" Width="650px" />
<ajaxToolkit:HoverMenuExtender ID="hme4st" runat="server"
TargetControlID="tvSearchTbx"
PopupControlID="stHoverPanel"
PopupPosition="Bottom"
OffsetX="20"
OffsetY="10"
PopDelay="0">
</ajaxToolkit:HoverMenuExtender>
<span class="btn_wrap span_margin_left10">
<asp:Button ID="tvSearchBtn" runat="server" CssClass="input_btn" Height="20px" Style="margin-top: -20px; margin-left: 100px;" Text="Search" OnClick="tvSearchBtn_Click" />
</span>
<%--<asp:RequiredFieldValidator ID="tbxValidator" runat="server" Style="position: relative; margin-left: 250px; margin-top: 25px; color: #FC890D; font-size: large" ErrorMessage="* Incomplete search request - Please complete all search criteria." ControlToValidate="searchTextBox"></asp:RequiredFieldValidator>--%>
<div runat="server" id="errorMessageDiv" style="margin-top: 50px; display: none; height: 40px; width: 100%; text-align: center; font-size: x-large; color: #FC890D">
</div>
<asp:SqlDataSource ID="geographicalAreaSqlDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:RDSConnectionString %>"
SelectCommand="STP_GetGeographicalAreas"
SelectCommandType="StoredProcedure"></asp:SqlDataSource>
<asp:SqlDataSource ID="newsAreasSqlDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:RDSConnectionString %>"
SelectCommand="STP_GetNewsAreas"
SelectCommandType="StoredProcedure"></asp:SqlDataSource>
<div style="text-align: center">
<asp:UpdateProgress ID="progress" runat="server" DisplayAfter="100" DynamicLayout="true">
<ProgressTemplate>
<img src="img/LoadingTailoredView.gif" alt="Loading data, please wait..." />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="tvResultUpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<div id="TailoredViewResultTab" style="display: none">
<div id="TopicCodesGridViewDiv" class="RoundCornerDiv" style="background-color: transparent; position: relative; display: normal; width: 30%; height: 250px; top: 30px; margin-left: 0px; margin-right: 33%">
<div id="TopicCodesLabelDiv" style="height: 20px; margin-top: -53px; margin-left: 20%; margin-right: 20%; display: normal; text-align: center; font-size: large; color: #ff6a00">
<asp:Label ID="TopicCodesLabel" runat="server" Class="label">Topic Codes</asp:Label>
</div>
<asp:GridView ID="TopicCodesGridView" runat="server" CellPadding="3" DataSourceID="TopicCodesResult"
OnSelectedIndexChanged="TopicCodesGridView_SelectedIndexChanged"
OnPageIndexChanging="TopicCodesGridView_PageIndexChanging"
Style="margin-top: 3px; table-layout: fixed; max-width: 100%;"
OnRowDataBound="TopicCodesGridView_RowDataBound"
AllowSorting="True"
AutoGenerateColumns="false"
AllowPaging="True" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellSpacing="2">
<Columns>
<asp:TemplateField HeaderText="Code">
<ItemTemplate>
<div>
<%#Eval("Code") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description" ItemStyle-CssClass="gridViewLeftAlign">
<ItemTemplate>
<div class="tailoredViewGridViewRight" style="width: 100%; height: 100%">
<%#Eval("Description") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<%-- <asp:CommandField ShowSelectButton="true" ButtonType="Button" Visible="true" />--%>
</Columns>
<FooterStyle BackColor="#FC890D" ForeColor="#8C4510" />
<HeaderStyle BackColor="#FC890D" Font-Bold="True" ForeColor="White" Width="50px" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" BackColor="#FC890D" />
<PagerSettings Mode="NextPreviousFirstLast" />
<RowStyle Width="150px" BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#FC890D" Font-Bold="True" ForeColor="Green" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</div>
<div id="treeViewDiv" class="RoundCornerDiv" style="margin-top: auto; position: relative; display: normal; width: 30%; height: 250px; top: -346px; margin-left: 33%; margin-right: 33%">
<div id="treeViewLabelDiv" style="margin-top: -53px; margin-left: 20%; margin-right: 20%; display: normal; text-align: center; font-size: large; color: #ff6a00">
<asp:Label ID="treeViewLabel" runat="server" Class="label">Topic Tree View</asp:Label>
</div>
<div id="tvTreeViewDiv" class="TailoredViewScroll" style="margin-top: 3px; text-align: left; overflow: scroll; height: 290px;">
<ul id="tvTreeView" class="filetree">
<li>
<span title="title" class="folder">Folder0</span>
<ul>
<li title="This is child 0">
<span class="file" style="color: red">Child 0</span>
</li>
<li class="file" title="This is child 1" style="visibility: visible">
<span class="file">Child 1</span>
</li>
<li title="This is child 2" style="visibility: visible">
<span class="file">Child 2</span>
</li>
<li title="This is child 1">
<span class="file">Child 1</span>
</li>
<li title="This is child 4" style="visibility: visible">
<span class="file">Child 4</span>
</li>
<li title="This is child 5" style="visibility: visible">
<span class="file">Child 5</span>
</li>
<li title="This is child 2">
<span class="file">Child 2</span>
</li>
<li class="file" title="This is child 1" style="visibility: visible">
<span class="file">Child 1</span>
</li>
<li title="This is child 2" style="visibility: visible">
<span class="file">Child 2</span>
</li>
<li title="This is child 3">
<span class="file">Child 3</span>
</li>
<li title="This is child 4" style="visibility: visible">
<span class="file">Child 4</span>
</li>
<li title="This is child 5" style="visibility: visible">
<span class="file">Child 5</span>
</li>
<li title="This is folder 2">
<span class="folder">Folder 1</span>
<ul>
<li title="This is folder 2's child 1">
<span class="file">child child 00</span>
</li>
<li title="This is child 4" style="visibility: visible">
<span class="file">Child 4</span>
</li>
<li title="This is child 1">
<span class="file">child child 01</span>
</li>
<li title="This is child 4" style="visibility: visible">
<span class="file">Child 4</span>
</li>
<li>
<span class="folder">Folder 2</span>
<ul>
<li>
<span class="file">file 0000</span>
</li>
<li>
<span class="file">file 0000</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="RecurringReportsGridViewDiv" class="RoundCornerDiv" style="position: relative; display: normal; width: 30%; height: 250px; top: -722px; margin-left: 66%">
<div id="RecurringReportsLabelDiv" style="margin-top: -53px; margin-left: 20%; margin-right: 20%; display: normal; text-align: center; font-size: large; color: #ff6a00">
<asp:Label ID="RecurringReportsLabel" runat="server" Text="Label" Class="label">Recurring Reports</asp:Label>
</div>
<asp:GridView ID="RecurringReportsGridView" runat="server" CellPadding="3" DataSourceID="RecurringReportsResult"
Style="margin-top: 3px; table-layout: fixed; max-width: 100%;"
OnRowDataBound="RecurringReportsGridView_RowDataBound"
AllowSorting="True" AutoGenerateColumns="False" AllowPaging="True" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellSpacing="2">
<Columns>
<asp:TemplateField HeaderText="Code">
<ItemTemplate>
<div>
<%#Eval("Code") %>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description" ItemStyle-CssClass="gridViewLeftAlign">
<ItemTemplate>
<div class="tailoredViewGridViewRight" style="width: 100%; height: 100%">
<%#Eval("Description") %>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#FC890D" ForeColor="#8C4510" />
<HeaderStyle BackColor="#FC890D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" Width="50px" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" BackColor="#FC890D" />
<PagerSettings Mode="NextPreviousFirstLast" />
<RowStyle Width="150px" BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
</div>
<asp:ObjectDataSource ID="CompanryRicsResult" runat="server"
TypeName="TR.News.RDWS.SearchTool.DataManager.DataManagerRepository"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetCompanyRics4TailoredView"></asp:ObjectDataSource>
<asp:ObjectDataSource ID="TopicCodesResult" runat="server"
SelectMethod="GetTopicCodes4TailoredView"
OldValuesParameterFormatString="original_{0}"
TypeName="TR.News.RDWS.SearchTool.DataManager.DataManagerRepository"></asp:ObjectDataSource>
<asp:ObjectDataSource ID="RecurringReportsResult" runat="server"
SelectMethod="GetRecurringReports4TailoredView"
OldValuesParameterFormatString="original_{0}"
TypeName="TR.News.RDWS.SearchTool.DataManager.DataManagerRepository"></asp:ObjectDataSource>
<asp:Panel runat="server" ID="gaHoverPanel" ForeColor="White" BackColor="#FC890D">
Select primary geographical area of interest
</asp:Panel>
<asp:Panel runat="server" ForeColor="White" BackColor="#FC890D" ID="naHoverPanel">
Select primary news area of interest
</asp:Panel>
<asp:Panel runat="server" ID="stHoverPanel" CssClass="hoverMenu4TailoredView" ForeColor="White" BackColor="#FC890D">
Enter keywords in English that relate to your news area of interest
</asp:Panel>
<div id="CompanyRicsGridViewDiv" class="RoundCornerDiv" style="display: none; width: 30%; height: 550px; top: 30px; margin-left: 0px">
<div id="CompanyRicsLabelDiv" style="margin-left: 20%; margin-right: 20%; text-align: center; display: normal; font-size: large; color: #ff6a00">
<asp:Label ID="CompanyRicsLabel" runat="server" Text="Label" Class="label">Company RICs</asp:Label>
</div>
<asp:GridView ID="CompanyRicsGridView" runat="server" OnDataBound="CompanyRicsGridView_DataBound" CellPadding="3" DataSourceID="CompanryRicsResult"
Style="table-layout: fixed; max-width: 100%;"
OnRowDataBound="CompanyRicsGridView_RowDataBound"
AllowSorting="True" AutoGenerateColumns="False" AllowPaging="True" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellSpacing="2">
<Columns>
<asp:HyperLinkField HeaderStyle-Width="30%" ItemStyle-CssClass="tailoredViewGridViewLeft" DataTextField="RIC" HeaderText="RIC" SortExpression="RIC" DataNavigateUrlFormatString="#CompanyTab">
<HeaderStyle Width="30%" />
<ItemStyle CssClass="tailoredViewGridViewLeft" />
</asp:HyperLinkField>
<asp:TemplateField HeaderText="Name" ItemStyle-CssClass="gridViewLeftAlign">
<ItemTemplate>
<div class="tailoredViewGridViewRight" style="width: 100%; height: 100%">
<%#Eval("Name") %>
</div>
</ItemTemplate>
<ControlStyle Width="250px" />
<ItemStyle CssClass="gridViewLeftAlign" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#FC890D" Font-Bold="True" ForeColor="White" Width="50px" />
<PagerSettings Mode="Numeric" />
<%-- <PagerTemplate>
<asp:Repeater ID="repFooter" OnItemCommand="repFooter_ItemCommand" runat="server">
<HeaderTemplate>
<div class="pager"></div>
</HeaderTemplate>
<ItemTemplate>
<div class="gridViewPager" >
<asp:LinkButton ID="linkPage" BackColor="Green" ForeColor="Red" Text='<%# Container.DataItem %>' CommandName="ChangePage"
CommandArgument="<%# Container.DataItem %>" runat="server" />
</div>
</ItemTemplate>
<FooterTemplate>
<div class="clear"></div>
</FooterTemplate>
</asp:Repeater>
</PagerTemplate>--%>
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" BackColor="#FC890D" />
<RowStyle Width="150px" BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>`enter code here`
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
