Matt Berseth

I am currently working on a data-centric web application.  The page I most recently worked on allows the user to browse data from six different tables (a primary table, and five other tables that have 1-M relationships to the rows in the primary table).  A row from the primary table is displayed in a DetailsView.  Below the DetailsView is a TabContainer control with five tabs; each tab contains a GridView that displays the related rows in the other five tables.  Below is a screen shot of what the TabContainer portion of the page looks like. 

Live Demo | Download Sample Site

When I first developed the page, I bound the DetailsView and each of the GridViews to the corresponding DataSources like I usually do.  Everything worked great in our development environment.  The grids filled nicely and I could move around from tab to tab with no problems.  However, when we moved the page into our production environment loading the page was terribly slow.  In production, we have n-times more data and the queries that filled the various GridViews performed much slower than they were in our development environment.  And because just loading the page causes all 6 of the queries to execute, there were some serious performance issues with this page. 

To solve the problem I moved each of the GridViews in the TabContainer into its own UpdatePanel and delayed loading them until the user clicked on the tab they wanted to view.  I set the default tab to the one I felt that users were most often interested in.  This way only 2 queries were executed the first time the page loaded, and the other 4 queries would execute on-demand so only the users who were interested in the data for the tab would pay the price of waiting for the query.  The following are the steps I took to accomplish this ...

Define the DataSources

You can create your DataSources just like you normally would.  In my example I am using SqlDataSource's to populate the grids.  The example I created uses the Customer, Orders and Employees tables from the Northwind database and the DataSources are defined as follows.

<asp:SqlDataSource ID="sqldsCustomers" runat="server" />       
<asp:SqlDataSource ID="sqldsOrders" runat="server" />       
<asp:SqlDataSource ID="sqldsEmployees" runat="server" />       

Add the TabContainer to the Page

Next, you can add the markup for the TabContainer control to your page.  Also, add the TabPanel as children of the TabContainer.  For each of the TabPanels you can set the HeaderText to the text value you would like displayed for each of the tabs.  Because the three tabs in my sample are for Customers, Orders and Employees data, this is exactly what I named my tabs.

<ajaxToolkit:TabContainer ID="tabContainer" runat="server">
   <ajaxToolkit:TabPanel runat="server" HeaderText="Customers">
        <ContentTemplate>...</ContentTemplate>
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel runat="server" HeaderText="Orders">
        <ContentTemplate>...</ContentTemplate>
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel runat="server" HeaderText="Employees">
        <ContentTemplate>...</ContentTemplate>
    </ajaxToolkit:TabPanel>                                
</ajaxToolkit:TabContainer> 

Add the GidView to the TabPanel's ContentTemplate

Once you have created the TabPanels, you can go ahead and populate the ContentTemplates with the GridView's the tab will be displaying.  Also, since we already know we will be needing each of these GridViews to be loaded via async-postbacks we can go ahead and create them as children of UpdatePanels. 

<ajaxToolkit:TabContainer ID="tabContainer" runat="server">
   <ajaxToolkit:TabPanel runat="server" HeaderText="Customers">
        <ContentTemplate>
            <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                <ContentTemplate>                    
                    <asp:GridView 
                        runat="server"
                        AllowPaging="true" AllowSorting="true" PageSize="10" DataSourceID="sqldsCustomers" />
                </ContentTemplate>
            </asp:UpdatePanel>                                    
        </ContentTemplate>
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel runat="server" HeaderText="Orders">
        <ContentTemplate>
            <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:GridView  
                        runat="server"
                        AllowPaging="true" AllowSorting="true" PageSize="10" DataSourceID="sqldsOrders" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel runat="server" HeaderText="Employees">
        <ContentTemplate>
            <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                <ContentTemplate>                    
                    <asp:GridView 
                        runat="server"
                        AllowPaging="true" AllowSorting="true" PageSize="10" DataSourceID="sqldsEmployees" />
                </ContentTemplate>
            </asp:UpdatePanel>                                    
        </ContentTemplate>
    </ajaxToolkit:TabPanel>                                
</ajaxToolkit:TabContainer> 

Add Triggers for each of the UpdatePanels

Next, we will wire the triggers for each UpdatePanel's.  In my example, the Tab containing the Customers is displayed first.  I want this content bound when the page is first loaded, and this UpdatePanel should only be refreshed when a postback is triggered from a child control.  For the other non-default tabs, I also want them to refresh when a postback is triggered from a child control, but I also want to define an explicit trigger that I can fire when the user clicks on the Tab.  To accomplish this I add a couple of hidden HTML input elements to the page and register these as explicit AsyncPostBackTrigger's for the other two UpdatePanels.  These elements will be used to cause the postback via __doPostBack from a javascript function created in the next step.  This is a similar technique that I used in a previous post.

<input id="btnOrdersTrigger" runat="server" type="button" style="display:none" onserverclick="BtnOrdersTrigger_Click" />

<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnOrdersTrigger" />
    </Triggers>
    <ContentTemplate>
        <asp:GridView  ID="gvOrders" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>  

Handle the OnClientActiveTabChanged Event

The TabContainer control exposes a OnClientActiveTabChanged event that is fired on the client when the active tab index is changed.  We are going to hook into this event in order to determine when to force a Tab's content to update.  First, you can set this attribute to the name of the javascript function you want to trigger the load.  In my sample this function is called clientActiveTabChanged.

<ajaxToolkit:TabContainer ID="tabContainer" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="clientActiveTabChanged" />

Next, we can go ahead and implement this function as follows.  First, we need to determine what the active tab is, once we know that we can decide if we need to trigger the loading of the Tab's content.  The TabContainer javascript object exposes a get_activeTabIndex() property that returns the index of the currently active tab.  In my example, if the index is 1 I need to load the Orders tab and if it is 2 I need to load the Employees tab.  Then, we can use the $get function to see if the DOM element for the tabs GridView is already loaded, if it is we don't need to do anything, otherwise we need to start an asyncpostback so the GridView can be properly loaded.  The complete javascript function that does this is as follows. 

function clientActiveTabChanged(sender, args) {
    
    //  see if the table elements for the grids exist yet
    var isTab1Loaded = $get('<%= this.gvOrders.ClientID %>');
    var isTab2Loaded = $get('<%= this.gvEmployees.ClientID %>');

    //  if the tab does not exist and it is the active tab, 
    //  trigger the async-postback
    if(!isTab1Loaded && sender.get_activeTabIndex() == 1){
        // load tab1
        __doPostBack('btnOrdersTrigger', '');
    }
    else if(!isTab2Loaded && sender.get_activeTabIndex() == 2){
        // load tab2
        __doPostBack('btnEmployeesTrigger', '');
    }            
}

Handle the ServerClick events of the UpdatePanel triggers

Next, we need to manually force the binding of data to the GridViews.  This is done by handling the ServerClick event of the input buttons for both the Orders and Employees GridViews.  This is done as follows:

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
protected void BtnOrdersTrigger_Click(object sender, EventArgs args)
{
    this.gvOrders.Visible = true;
    this.gvOrders.DataBind();
}

/// <summary>
/// 
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
protected void BtnEmployeesTrigger_Click(object sender, EventArgs args)
{
    this.gvEmployees.Visible = true;
    this.gvEmployees.DataBind();            
}

In addition to this we need to make sure that databinding does not occur when the page is first loaded.  This can be done by setting the Visible property of the GridViews in the Orders and Employees tabs to false.  Controls that have a Visible value of false are not rendered and will not be databound.

<asp:GridView ID="gvEmployees" runat="server" Visible="false" />

Handle the pageLoad, beginRequest and endRequest Events for Displaying a Progress Indicator

Finally, the last step is to wire up some sort of progress indicator so the user can see that their action has caused the content within the tab to update.  In my example I am doing this by displaying an animated gif as a progress indicator.  I have a few other posts (here and here) on this blog describing how this can be done so I will not explain it here.  You can also download the sample site to view the source for the complete page.

That's it, Enjoy!