AJAX Control Toolkit – Tab Control - Stojance's Blog - MK Web UG

In my previous post, I mentioned that there are several new features of the AJAX Control Toolkit, one of which was the improved Tab Control. I discussed about the BalloonPopupExtender, which is a part of this toolkit since November 2011. In this blog post, I will talk about the Tab control.

There are several improvements of this control:

Vertical tabs;

Keyboard navigation;

OnDemand property.

If you want to use vertical tabs, you can do this by setting the TabContainer's property UserVerticalStripPlacement to True. You can also set the position of the tabs to the Top, TopRight, Bottom and BottomRight by setting the TabStripPlacement property. This is shown in the following code:

<ajax:TabContainer ID="tabs" Width="600" UseVerticalStripPlacement="true" TabStripPlacement="Top" runat="server">
    <ajax:TabPanel ID="Tab1" HeaderText="Tab 1" runat="server">
    <ContentTemplate>
        <h2>Blonde at Football Game</h2>
        <p>
        ...
        </p>
    </ContentTemplate>    
    </ajax:TabPanel>
    <ajax:TabPanel ID="Tab2" HeaderText="Tab 2" runat="server">
    <ContentTemplate>
        <h2>Magic Mirror</h2>
        <p>
        ...
        </p>
     </ContentTemplate>
     </ajax:TabPanel>
</ajax:TabContainer>

And the result of this action is given here:

You can navigate through the tabs by using the arrow keys, and also with Home and End from the keyboard.

So, why do we need the OnDemand property? if we had a lot of data displaying in different tabs, like when we have to display users in one tab, groups in another tab and many other data in other tabs, it would be inefficient if we loaded all of the data on page load. That’s why we will have the need of OnDemand, which makes sure that concrete data will be shown only when we click on the according tab.

Every TabPanel has a property called OnDemandMode, which has one of the three possible values: None, Always and Once. This way, we’ll make sure when the TabPanel will load it’s contents. Finally, we have the following code:

<ajax:TabContainer ID="tabs" Width="600" OnDemand="true" runat="server">
    <ajax:TabPanel ID="Tab1" HeaderText="Tab 1" OnDemandMode="Always" runat="server">
    <ContentTemplate>
        <asp:GridView ID="displayUsers" DataSourceID="Users" runat="server" />
        <asp:SqlDataSource
            ID="Users"
            SelectCommand="SELECT * FROM Users"
           ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=&quot;C:\SQLDatabase.mdf&quot;;Integrated Security=True;Connect Timeout=30;User Instance=True"
             runat="server" ProviderName="System.Data.SqlClient" />
        </ContentTemplate> 
        </ajax:TabPanel>
        <ajax:TabPanel ID="Tab2" HeaderText="Tab 2" OnDemandMode="Once" runat="server">
        <ContentTemplate>
        <asp:GridView ID="displayGroups" DataSourceID="Groups" runat="server" />
        <asp:SqlDataSource
            ID="Groups"
            SelectCommand="SELECT * FROM Groups"
            ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=&quot;C:\SQLDatabase.mdf&quot;;Integrated Security=True;Connect Timeout=30;User Instance=True"
            runat="server" />
        </ContentTemplate>
        </ajax:TabPanel>
</ajax:TabContainer>

Regards,

Stojanche