Geeks With Blogs
Bunch's Blog One day I'll have a catchy subtitle, one day

Prior to utilizing Ajax making a page with tabs was a bit of a pain. I would setup a MultiView and add in Views for each tab. Ajax’s Tab Container control is much easier to use. I’ve listed below the order on a sample aspx file that I setup the various Ajax controls to get it all to work.

The only real tricks I saw were to add the ScriptManager and the order of the TabContainer/TabPanel/ContentTemplate. The ScriptManager and Tab controls went inside the <div> and I made sure that the toolkit was registered as cc1.This example is in no way comprehensive, just a simple way to get some clean looking tab functionality on a aspx page.


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>



<form id="form1" runat="server">



<asp:ScriptManager ID="ScriptManager1" runat="server">


<cc1:TabContainer ID="TabContainer1" runat="server" Style="z-index: 17; left: 0px; position: absolute; top: 50px" Height="582px" Width="1519px" ActiveTabIndex="0" Enabled="true" >


<cc1:TabPanel runat="server" ID="ajaxPanel1" HeaderText="test1">



<asp:Button ID="Button1" runat="server" Height="59px" Style="z-index: 100; left: 12px; position: relative; top: 22px" Text="Test 1" Width="105px" />


<asp:Button ID="Button2" runat="server" Height="59px" Style="z-index: 102; left: 23px;position: absolute; top: 211px" Text="Test 2" Width="150px" />





<cc1:TabPanel runat="server" ID="TabPanel1" HeaderText="test2">



<asp:Button ID="Button3" runat="server" Height="59px" Style="z-index: 100; left: 221px; position: relative; top: 18px" Text="Button2" Width="105px" />


<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestConnectionString %>"

      SelectCommand="sptest_select" SelectCommandType="StoredProcedure">



<asp:GridView ID="GridView1" runat="server" Style="z-index: 102; left: 74px; position: absolute;top: 239px" DataSourceID="SqlDataSource1" >



</ContentTemplate>                                              </cc1:TabPanel>


<cc1:TabPanel runat="server" ID="TabPanel3" HeaderText="test3">



<asp:Button ID="Button3" runat="server" Height="59px" Style="z-index: 100; left: 12px; position: relative; top: 22px" Text="Orig Button" Width="105px" />










Technorati Tags: ,
Posted on Tuesday, March 25, 2008 9:03 AM Ajax | Back to top

Comments on this post: Using Ajax Tabs

# re: Using Ajax Tabs
Requesting Gravatar...
Working in VS2005. Using masterpage and AJAX TabContainer.

I'm trying to get away from using tables to format data entry; what up to now has been size/position trial and error formatting.

To get labels aligned right and textboxes, dropdowns and checkboxes aligned left I've had to resort to position: absolute.

To get labels and objects past a masterpage I use an asp:panel with style position relative.

Doesn't matter if I'm using inline or a CSS Stylesheet I am unable to get the objects to show up within a tabcontainer. They just appear in the absolute position as requested. How do I get them to format within the TabContainer?

I would appreciate any insight as to how best to go about doing this.

Left by Neal Mazer on Nov 18, 2009 8:36 AM

Your comment:
 (will show your gravatar)

Copyright © Bunch | Powered by: