Lazy Load Panel Courtesy of TabContainer and UpdatePanel

Here is how I implemented a Lazy load Panel. This is a nifty way to have a mini-menu of tabs without some big data transfer happening all at once. The ASP.NET render after complete model makes incremental rendering a necessary task of the developer or else the users will take a hike. This is my adaptation of Matt Burseth's example that should be helpful to avoid the LESSTHAN%= and LESSTHAN%# problems that I had. Remember to put the js in the form tag (probably below the ScriptManager). Two parts below are the ASPX and Code Behind. ASPX:

<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>

Code Behind:

/// <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();
    }
}