Code Behind:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Lazy Load Panel Page</title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ScriptManager ID="ScriptManager1" runat="server">
</ajax:ScriptManager>
<script type="text/javascript" language="javascript">
//var _updateProgressDiv;
function pageLoad(sender, args) {
// register for our eveents
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
//_updateProgressDiv = $get('ActionProgress');
}
function beginRequest(sender, args) {
// get the gridview element
var tabContainer = $get('<%= this.tcTest.ClientID %>');
alert(tabContainer);
// make it visible
// _updateProgressDiv.style.display='';
}
function endRequest(sender, args) {
// make it invisible
// _updateProgressDiv.style.display='none';
}
function clientActiveTabChanged(sender, args) {
// see if table elements for the grids exist yet
var isTab1Loaded = $get('<%= this.gv1.ClientID %>');
var isTab2Loaded = $get('<%= this.gv2.ClientID %>');
var isTab3Loaded = $get('<%= this.gv3.ClientID %>');
// if tab does not exist and it is the active tab, trigger the async-postback
alert(isTab1Loaded + ',' + isTab2Loaded + ',' + isTab3Loaded + ':' + sender.get_activeTabIndex());
if (!isTab1Loaded && sender.get_activeTabIndex() == 0) {
// load tab1
// alert('fire1');
__doPostBack('<%= btn1Trigger.UniqueID %>', '');
}
if (!isTab2Loaded && sender.get_activeTabIndex() == 1 ) {
// load tab2
// alert('fire2');
__doPostBack('<%= btn2Trigger.UniqueID %>', '');
}
if (!isTab3Loaded && sender.get_activeTabIndex() == 2 ) {
// load tab3
// alert('fire3');
__doPostBack('<%= btn3Trigger.UniqueID %>', '');
}
}
</script>
<input id="btn1Trigger" runat="server" type="button" style="display:none" onserverclick="btn1Trigger_Click" />
<input id="btn2Trigger" runat="server" type="button" style="display:none" onserverclick="btn2Trigger_Click" />
<input id="btn3Trigger" runat="server" type="button" style="display:none" onserverclick="btn3Trigger_Click" />
<div>
<ajaxc:TabContainer ID="tcTest" runat="server" OnClientActiveTabChanged="clientActiveTabChanged" ActiveTabIndex="0">
<ajaxc:TabPanel ID="tp1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<ajax:UpdatePanel ID="upnl1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
1<br />
<asp:GridView ID="gv1" runat="server" Visible="true" DataSourceID="sqlLicStatus">
</asp:GridView>
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="btn1Trigger" />
</Triggers>
</ajax:UpdatePanel>
</ContentTemplate>
</ajaxc:TabPanel>
<ajaxc:TabPanel ID="tp2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<ajax:UpdatePanel ID="upnl2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
2<br />
<asp:GridView ID="gv2" runat="server" Visible="False" DataSourceID="sqlCondition" >
</asp:GridView>
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="btn2Trigger" />
</Triggers>
</ajax:UpdatePanel>
</ContentTemplate>
</ajaxc:TabPanel>
<ajaxc:TabPanel ID="tp3" runat="server" HeaderText="TabPanel3">
<ContentTemplate>
<ajax:UpdatePanel ID="upnl3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
3<br />
<asp:GridView ID="gv3" runat="server" Visible="False" DataSourceID="sqlCondition" >
</asp:GridView>
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="btn3Trigger" />
</Triggers>
</ajax:UpdatePanel>
</ContentTemplate>
</ajaxc:TabPanel>
</ajaxc:TabContainer>
</div>
<asp:SqlDataSource ID="sqlLicStatus" runat="server"
ProviderName="System.Data.Bar"
DataSourceMode="DataReader"
ConnectionString="foo"
SelectCommand="SELECT foo FROM Validations WHERE bar=102 ORDER BY Code;">
</asp:SqlDataSource>
<asp:SqlDataSource ID="sqlCondition" runat="server"
ProviderName="System.Data.Foo"
DataSourceMode="DataReader"
ConnectionString="foo"
SelectCommand="SELECT foo FROM Validations WHERE bar=18 ORDER BY Code;">
</asp:SqlDataSource>
</form>
</body>
</html>
/// <summary>
/// Lazy load TabPanel in a TabContainer
/// The update panel contents are fetched if client trigger is fired.
/// The client trigger is fired if the target tab is active and the
/// target GridView is not active (visible).
/// </summary>
public partial class Samples_LazyPanel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn1Trigger_Click(object sender, EventArgs args)
{
this.gv1.Visible = true;
this.gv1.DataBind();
}
protected void btn2Trigger_Click(object sender, EventArgs args)
{
this.gv2.Visible = true;
this.gv2.DataBind();
}
protected void btn3Trigger_Click(object sender, EventArgs args)
{
this.gv3.Visible = true;
this.gv3.DataBind();
}
}
