Several people have asked about how to make the contents of their tabs load when the user first clicks them, thereby reducing initial page size.
I can think of several ways to do this with varying levels of complexity, but here’s away you can do right now with minimal hacking. We’ll think about how to build this in. But for now…
Basically we can do this with UpdatePanels.
What we’ll do is:
- Add an UpdatePanel inside each TabPanel
- Add a hidden button to trigger that update panel
- Add a Panel with Visible=”false” that has the content we want to load inside of it (Visible false prevents it from rendering at all)
Let’s get started. First, we just create an empty AJAX Enabled project and drop an AjaxControlToolkit TabContainer on the page. Add some TabPanels:
act:TabContainer ID=”tc1″ runat=”server” >
<act:TabPanel HeaderText=”TabPanel0″ runat=”server” >
This is the inital tab.
<act:TabPanel HeaderText=”TabPanel1″ runat=”server” >
We want to load this later.
Next, to each TabPanel, add an UpdatePanel, and inside that a Button and a Panel. Note the OnClick handler on the Button and the naming of the button and the panel. On the button, set it’s style to “display:none;” so the browser hides it.
<act:TabPanel HeaderText=”TabPanel1″ runat=”server”>
<asp:UpdatePanel ID=”up1″ runat=”server”>
<asp:Button ID=”TabButton1“ runat=”server” OnClick=”TabButton_Click” style=”display:none;”/>
<asp:Panel ID=”TabContent1“ runat=”server” Visible=”False”>
We want to load this later
Now on the server side, we add some code to handle the click. Again, note how we use the naming.
Protected Sub TabButton_Click(ByVal sender As Object, ByVal e As System.EventArgs)
‘ find the sibling with the name that starts with TabContainer
Dim containerId As String = “TabContent” & tc1.ActiveTabIndex
Dim panel As Panel = tc1.ActiveTab.FindControl(containerId)
If (Not panel Is Nothing) Then
Here, we just flip the Visible property to true. You could, of course, do a databinding operation here or whatever.
<act:TabContainer ID=”tc1″ runat=”server” ActiveTabIndex=”0″ OnClientActiveTabChanged=”loadTabPanel” >
<script type=”text/ecmascript” src=”OnDemandTabs.js”/>
Test it – we’re done! When the active tab changes, the UpdatePanel will fire and we’ll go back to the server. Note how this is set up so you can do it for N tabs – just keep using TabButtonX/TabContentX as the naming pattern and it’ll work.
We can even add an UpdateProgress here to make it look nice, though on the local machine we’ll probably never see it.
<asp:UpdateProgress id=”UpdateProgress1″ runat=”server” AssociatedUpdatePanelID=”UpdatePanel1″>
Presto. Hope that helps. Full project attached. Works in all browsers.