Hello peter,
Based on my understanding, you want to update GridView when the user clicks
the related TabPanel, instead of loading GridView in Page_Load. If I have
misunderstood you, please feel free to let me know.
1. Firstly, please build an UpdatePanel in TabPanel. We can make use of
OnClientActiveTabChanged event to check if active TabPanel is the one that
contains GridView control. If so, we can update the UpdatePanel with
GridView control via JavaScript.
Please check the following sample. There is a Label contorl in TabPanel2.
To simplify the problem, I assume this Label control is your GridView. In
the first Page_Load, it will not be rendered. Untill you click TabPanel2,
it will generate an asynchronous request and update UpdatePanel1. Let's
make an UpdateProgress to check the partial updating clearly.
JavaScript:
<script type="text/javascript">
function onTabChanged() {
var index = $find("TabContainer1").get_activeTabIndex();
if (index == 1)
Sys.WebForms.PageRequestManager.getInstance()._doPostBack('<%=UpdatePanel1.U
niqueID %>', '<%=UpdatePanel1.UniqueID %>')
}
</script>
HTML code:
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server"
EnablePartialRendering="true" ID="ScriptManager1" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
loading...
</ProgressTemplate>
</asp:UpdateProgress>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1"
OnClientActiveTabChanged="onTabChanged">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1"
HeaderText="TabPanel1">
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2"
HeaderText="TabPanel2">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"
OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"
Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3"
HeaderText="TabPanel3">
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>
Code Behind:
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}
}
2. However, there is a problem in this sample. When you click the
TabPanel2, it will update the GridView. During the 3-sec updating process,
if you click the TabPanel2 again, it will generate another request. In
Asp.Net Ajax, the new asynchronous request will abort the old one. In case
that the user clicks TabPanel2 continuously when UpdatePanel is updating,
it will cancel the old request and launch the new one continuously. So, we
had better enforce the existing request in this case.
Please add the following JavaScript code to the above HTML code at all if
you want.(Please put it after </body> tag.)
<script type="text/javascript" language="javascript">
var lastPostBackButtonId = null;
var btnPrecedenceId = "<%= this.UpdatePanel1.ClientID %>";
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(
function(sender, e) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack()) {
if (lastPostBackButtonId == btnPrecedenceId) {
e.set_cancel(true);
return;
}
}
lastPostBackButtonId = e.get_postBackElement().id;
});
</script>
3. Hope the above solution is what you want. However, in this way,
whenever the user clicks TabPanel, it will generate a request and update. I
think it had better update the GridView control only if TabPanel is first
clicked. You can set a toggle variable on client to achieve it.
You can modify the existing code with the following code:
<script type="text/javascript" language="javascript">
var updateCounter = 0;
function onTabChanged() {
var index = $find("TabContainer1").get_activeTabIndex();
if (index == 1 && updateCounter==0) {
Sys.WebForms.PageRequestManager.getInstance()._doPostBack('<%=UpdatePanel1.U
niqueID %>', '<%=UpdatePanel1.UniqueID %>')
updateCounter = 1;
}
}
</script>
Furthermore, you can set an "update" button in TabPanel2 so that the
users can update GridView whenever they want.
AjaxControlToolkit is following Microsoft Public License (Ms-PL), which is
out of the support boundaries of our managed newsgroups. Please post it to
http://forums.asp.net/1022.aspx if you'd like. It is not managed, but this
forum will provide support for AjaxControlToolkit professionally.
AjaxControlToolkit License:
http://www.codeplex.com/AjaxControlToolkit/license
MSDN Newsgroup Support Boundary:
http://blogs.msdn.com/msdnts/archive/2006/11/08/msdn-service-introduction.as
px
Sincerely,
Vince Xu
Microsoft Online Support
£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.
MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½£½
