Develop Reference

asp.net - text boxes lose values entered on tab switch

I have ajax telerik tabs in my code and when I switch the tabs my controls loses whatever I have typed.
I tried "enableViewState" to true. It didn't work either.
What I want is the controls to retain values entered on tab switch
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" Width="100%" Align="Justify" >
<Tabs>
<telerik:RadTab PageViewID="RadPageView1" NavigateUrl="CreateNewUser.aspx?TabIndex=0" Text="Adviser Details" HoveredCssClass="hoveredTab" Font-Bold="true" />
<telerik:RadTab PageViewID="RadPageView2" NavigateUrl="CreateNewUser.aspx?TabIndex=1" Text="Fee Split" HoveredCssClass="hoveredTab" Font-Bold="true" />
<telerik:RadTab PageViewID="RadPageView3" NavigateUrl="CreateNewUser.aspx?TabIndex=2" Text="Signature" HoveredCssClass="hoveredTab" Font-Bold="true" />
<telerik:RadTab PageViewID="RadPageView4" NavigateUrl="CreateNewUser.aspx?TabIndex=3" Text="Reference Details" HoveredCssClass="hoveredTab" Font-Bold="true" />
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" RenderSelectedPageOnly="false">
<telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" CssClass="RadPageViewBorder">
<div style="padding: 10px 10px 10px 10px; background-color: white;">
<uc1:AdvisorDetails ID="UCAdvisorDetails" runat="server" />
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Width="100%" Height="100%" CssClass="RadPageViewBorder">
<div style="padding: 0px 0px 0px 0px; background-color: white;">
<uc1:AdvisorFeeSplit runat="server" ID="UCAdvisorFeeSplit" />
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView3" runat="server" Width="100%" Height="100%" CssClass="RadPageViewBorder">
<div style="padding: 0px 0px 0px 0px; background-color: white;">
<uc1:AdvisorSignature ID="UCAdvisorSignature" runat="server" />
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView4" runat="server" Width="100%" Height="100%" CssClass="RadPageViewBorder">
<div style="padding: 0px 0px 0px 0px; background-color: white;">
<uc1:AdvisorReferenceDetails runat="server" ID="UCAdvisorReferenceDetails" />
</div>
</telerik:RadPageView>
</telerik:RadMultiPage>
<div class="col100" style="padding-top: 35px; padding-left: 30px; padding-right: 30px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnAddUser" ValidationGroup="vgUser" runat="server" Width="120px" Text="Save" CssClass="btn-common" OnClick="btnAddUser_Click" />
<asp:Button ID="btnDeleteUser" ValidationGroup="vgUser" runat="server" Width="120px" Text="Delete" CssClass="btn-common" OnClick="btnDeleteUser_Click"/>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnAddUser"/>
<asp:PostBackTrigger ControlID="btnDeleteUser"/>
</Triggers>
</asp:UpdatePanel>
</div>
<div class="col100">
<span class="failureNotification">
<asp:Literal ID="litError" runat="server"></asp:Literal>
</span>
<span class="successNotification">
<asp:Literal ID="litSuccess" runat="server"></asp:Literal>
</span>
</div>
Can someone point out the issue pls ?

Your tabs have NavigateUrl property set, which means they render as links, which means they redirect, they do not use ajax.
That's why the values are not persisted.

Gridview Could not found control for modalpopupextender

I have a gridview with column "View" ID= "lnkViewContact". On click of this link signup modalpopupextender will be displayed. This popup is similar for all the rows. But when I am running it the error I am getting is "Could not found control lnkViewContact". How it can be resolved. one alternative is by using Onclick event on link click but I do not want to do a postback for opening the Popupextender. Below is my code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlNoData" runat="server" align="center" Visible="false" Style="height: 300px;
width: auto;">
<h1 style="font-variant: normal; font-family: Times New Roman; font-size: 1.8em;
margin-left: 15px; font-weight: lighter; color: Green; margin-top: 100px;">
Refine your search.</h1>
<h1 style="font-variant: normal; font-family: Times New Roman; font-size: 1.8em;
margin-left: 15px; font-weight: lighter; color: Green; margin-left: 100px; margin-right: 100px;">
Not finding suitable candidates. </h1>
<cc1:ModalPopupExtender ID="mp3" runat="server" PopupControlID="pnlJobPost" BehaviorID="bvJobPost"
TargetControlID="lnkPostJobReq" BackgroundCssClass="mBackground" CancelControlID="btnClose">
</cc1:ModalPopupExtender>
<asp:LinkButton ID="lnkPostJobSignUp" Text="Sign Up and Post Job" Font-Size="Medium"
runat="server" OnClick="SignUp" Visible="false"></asp:LinkButton>
<asp:LinkButton ID="lnkPostJobReq" Text="Post Job Requirement" Font-Size="Medium"
runat="server"></asp:LinkButton>
</asp:Panel>
<asp:GridView ID="grdSearchResult" runat="server" DataKeyNames="SeekerEmail_Id, Extension"
OnRowDataBound="OnRowDataBound" AutoGenerateColumns="False" BorderWidth="1px"
BackColor="White" CellPadding="5" BorderStyle="None" BorderColor="Gray" GridLines="Both"
Width="100%">
<FooterStyle ForeColor="Black" BackColor="White"></FooterStyle>
<PagerStyle ForeColor="Black" HorizontalAlign="Center" BackColor="White"></PagerStyle>
<HeaderStyle ForeColor="White" Font-Bold="True" BackColor="Green"></HeaderStyle>
<Columns>
<asp:BoundField HeaderText="Job Skills" DataField="Primary_Skill" SortExpression="Primary_Skill"
ItemStyle-Width="35%" ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="true"
ItemStyle-CssClass="grdSearchResultbreakword"></asp:BoundField>
<asp:BoundField HeaderText="Resume Title" DataField="Resume_Title" SortExpression="Resume_Title"
ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="true" ItemStyle-Width="30%"
ItemStyle-CssClass="grdSearchResultbreakword"></asp:BoundField>
<asp:BoundField HeaderText="Exp (Years)" DataField="Experience" SortExpression="Experience"
ItemStyle-HorizontalAlign="Center"></asp:BoundField>
<asp:TemplateField HeaderText="Contact Details Email/Mobile" ItemStyle-HorizontalAlign="Center"
ItemStyle-Width="12%">
<ItemTemplate>
<asp:LinkButton ID="lnkViewContact" Text="View" runat="server"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact Details Email/Mobile" ItemStyle-HorizontalAlign="Center"
ItemStyle-Width="15%">
<ItemTemplate>
<asp:Label ID="lblContact" ForeColor="DarkOrange" runat="server" Text='<%# Eval("SeekerEmail_Id").ToString() +" / "+ Eval("Contact_Number").ToString() %>'
Style="word-wrap: normal; word-break: break-all; cursor: default;"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Download Resume" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:LinkButton ID="lnkDown" Text="Download" runat="server" OnClick="SignUp"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<SelectedRowStyle ForeColor="White" Font-Bold="True" BackColor="#008A8C"></SelectedRowStyle>
<RowStyle ForeColor="Black" BackColor="White"></RowStyle>
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#0000A9" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#000065" />
</asp:GridView>
<asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp1" BehaviorID="behaviorIDmp1" runat="server" PopupControlID="Panl1"
TargetControlID="lnkViewContact" CancelControlID="btnCancel" DropShadow="true" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="modalPopup" align="center" Style="display: none;
height: 400px;" DefaultButton="btnRegister">
<%--<h1 style="font-variant: normal; font-family: Comic Sans MS; font-size: 1.5em; font-weight: lighter;
margin-top: 2px; margin-bottom: 2px; text-align: center; color: Blue;">
SIGN UP</h1>--%>
<asp:Label ID="lblEmailId" runat="server" ForeColor="Black" Text="Email address"
Style="font-weight: bold; display: block; text-align: left; margin-left: 45px;
margin-top: 10px;"></asp:Label>
<asp:TextBox ID="txtEmailAddress" runat="server" class="txtFirstName" MaxLength="100"
name="email" TabIndex="3" value="" /><br />
<asp:RequiredFieldValidator EnableClientScript="true" ID="reqEmailAdress" runat="server"
ValidationGroup="modal" ControlToValidate="txtEmailAddress" ErrorMessage="Email Address Required"
Display="Dynamic" Style="color: Red;" />
<asp:RegularExpressionValidator ID="regEmailAddress" runat="server" ErrorMessage="Not Valid Email ID"
ValidationGroup="modal" Display="Dynamic" ControlToValidate="txtEmailAddress"
ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*">
</asp:RegularExpressionValidator>
<asp:Label ID="lblContactNumber" runat="server" ForeColor="Black" Text="Contact Number(Don't prefix 0 or +91)"
Style="font-weight: bold; display: block; text-align: left; margin-left: 45px;"></asp:Label>
<asp:TextBox ID="txtContactNumber" runat="server" class="txtFirstName" MaxLength="15"
name="contact" TabIndex="6" value="" /><br />
<asp:RequiredFieldValidator EnableClientScript="true" ID="reqContactNumber" runat="server"
ValidationGroup="modal" ControlToValidate="txtContactNumber" ErrorMessage="Contact Number Required"
Display="Dynamic" Style="color: Red;" />
<asp:RegularExpressionValidator ID="regContactNumber" runat="server" ControlToValidate="txtContactNumber"
ValidationGroup="modal" Text="Only 10 digit valid contact number is valid." ValidationExpression="[0-9]{10}"
Style="color: Red;" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:Button ID="btnRegister" ValidationGroup="modal" class="btnempregsubmit" runat="server"
Text="Save" OnClick="Register" CausesValidation="false" />
<br />
<asp:HyperLink ID="btnCancel" runat="server" Text="Cancel" CssClass="btnClosePopup">Close</asp:HyperLink>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grdSearchResult" />
<asp:AsyncPostBackTrigger ControlID="btnRegister" />
</Triggers>
</asp:UpdatePanel>

It is a bit confusing when you mentioned 'one alternative is by using Onclick event on link click but I do not want to do a postback for opening the Popupextender. ' If you want an OnClick event, you will have to make postback. Below is a suggestion.
.....This part is your code....
<asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp1" BehaviorID="behaviorIDmp1" runat="server" PopupControlID="Panl1"
TargetControlID="lnkViewContact" CancelControlID="btnCancel" DropShadow="true" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
....Replace with this......
<asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mp1" BehaviorID="behaviorIDmp1" runat="server" PopupControlID="Panl1"
TargetControlID="lnkFake" CancelControlID="btnCancel" DropShadow="true" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
And on the OnClick event code behind, do this to show the pop up
mp1.Show()

The Linkbutton inside a Gridview cannot be set as a TargetcontrolID of Modalpopupextender because at run time the ID of linkbutton will change dynaically. The work around is use the Onclick event of LinkButton and like in my case if there is any validation in modalpopupextender then validate the controls on server side.

Changing message displays to bottom to top

Hi I am doing a social network service using asp.net/c#, I have little problems with message sending. Message are flowed top to bottom. Like this
But I want to display messages bottom to top Like facebook..
I am displaying messages using repeater control.
repeater control code
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
Textbox code
<asp:TextBox ID="Message" runat="server" OnTextChanged="TextBox3_TextChanged" style="margin-left: 12px; text-align: left;" TextMode="MultiLine" Width="564px" Height="100px"></asp:TextBox>

The order of Items in the repeater will be the same as in DataSource, so just Order it by Time descending before bind.

why controls in updatepanel disappeared?

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>

I solved the problem by move the tvResultUpdatePanel inside the outter "display:none" Div.

coding is still showing the fieldname not the caption

In following code, I want to show not PATIENT NAME but "NAME" as it is in the caption
but it's still showing "PATIENT NAME". Is there another to use beside caption?
<Templates>
<DetailRow>
<dx:ASPxGridView ID="gvDetail" runat="server" ClientInstanceName="gvDetail"
AutoGenerateColumns="false"
DataSourceID="SqlDataSource1" Width="1100px" KeyFieldName="ID_KEY"
OnBeforePerformDataSelect="detailGrid_DataSelect" OnInit="gvDetail_Init">
<Columns>
<dx:GridViewDataTextColumn FieldName="ID_KEY" Visible="false">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="PATIENTNAME" Caption="Name" VisibleIndex="2">
<HeaderStyle HorizontalAlign="Center" />
<CellStyle HorizontalAlign="Left"></CellStyle>
<HeaderTemplate>
<div style="text-align: left; vertical-align: middle; float: left;">
<div style="float: left;">
<dx:ASPxImage runat="server" ID="imgFilterDetail" ToolTip="Show/hide grid filter" ImageUrl="~/Content/Images/GridFilterButton.png">
<ClientSideEvents Click="ImageClickDetail" />
</dx:ASPxImage>
</div>
<div style="float: left; padding-left: 10px; padding-top: 4px;">
Patient Name
</div>
</div>
</HeaderTemplate>