Vertical Tabs?

Is there a way to have the AJAX tabs line up on the left hand side, instead of on the top?

There isn't a simple property to change arrangement, but you should be able to accomplish that through overriding all of the related CSS.

Vertical tabs

I posted on in the toolkit forum but thought I would widen the audience a bit.

What's the best method these days for creating vertical tabs? I currently use the toolkit's tab control for my horizontal tabs but I want to put it in another tabcontainer that has vertical tabs (kinda like an old style TV set with channels as buttons). How are people doing this these days? Doesn't look like the AJAX tab control can be made into vertical tabs and after googling around I didn't see anything that jumped out at me.

Thoughts?

Thanks!

Craig

Hello craigcl,

I didn't see the implementation of this, but consider reading this article
http://www.codeproject.com/aspnet/WebTabControl.asp?df=100&forumid=304531&exp=0&select=1758008
and downloading the AJAX Toolkit sources helps your to create your own vertical
tabs

c> I posted on in the toolkit forum but thought I would widen the
c> audience a bit.
c>
c> What's the best method these days for creating vertical tabs? I
c> currently use the toolkit's tab control for my horizontal tabs but I
c> want to put it in another tabcontainer that has vertical tabs (kinda
c> like an old style TV set with channels as buttons). How are people
c> doing this these days? Doesn't look like the AJAX tab control can be
c> made into vertical tabs and after googling around I didn't see
c> anything that jumped out at me.
c>
c> Thoughts?
c>
c> Thanks!
c>
c> Craig
c>

It doesn't do this out of the box, but you can customize the AJAX Control Toolkit's tab control to do this. If you look at the tab's source, you'll see it renders just simple SPANs and DIVs. You can get a bit more insight on what is happening if you look atmy blog post on styling the tabs.

Hope this helps.

-Damien

Vertical tabs

What's the best method these days for creating vertical tabs? I currently use the toolkit's tab control for my horizontal tabs but I want to put it in another tabcontainer that has vertical tabs (kinda like an old style TV set with channels as buttons). How are people doing this these days? Doesn't look like the AJAX tab control can be made into vertical tabs and after googling around I didn't see anything that jumped out at me.

Thoughts?

Thanks!

Craig

Hi Craig,

Currently, there isn't a easy way to customize the tab control to show tabs vertically. But I don't think is quite difficult to implement your own one.

1. You may place several buttons vertically on the page.

2. Add some panels with corresponding content in them

3. Add javascript to control the visibility of these panels within the client side click handler of buttons

Very slow and unresponsive AJAX (Calendar + Tabs)

i just installed the toolkit into Visual Studio 2005, and managed to create some sample projects

I've implemented the Tabs and Calendar onto an existing project, in the believe that Ajax would provide faster (or as fast) access then the existing solution.

in order to make the Ajax work in the project, I've copied nearly all needed elements into the web.config ( http://codebetter.com/blogs/jay.kimble/archive/2006/10/26/How-To_3A00_-Enable-Microsoft-Ajax-Beta-over-on-an-existing-site.aspx )

now - the Ajax Calendar and Tabs works, the old server side asp.net have been fitted to the new controls...

but very very slow !?!? - the calendar takes 3-4 seconds to show and a single action in it takes 1-2 seconds ?

code:

1<%@dotnet.itags.org. Control Language='vb' AutoEventWireup='false' Codebehind='ctlQuizEdit.ascx.vb'2 Inherits='SurveyFactory.ctlQuizEdit' TargetSchema='http://schemas.microsoft.com/intellisense/ie3-2nav3-0' %>3<%@dotnet.itags.org. Register TagPrefix='fcke' TagName='FckHeader' src='ctlImportDefLangHeader.ascx' %>4<%@dotnet.itags.org. Register TagPrefix='fcke' TagName='FckFooter' src='ctlImportDefLangFooter.ascx' %>5<%@dotnet.itags.org. Register TagPrefix='cc1' TagName='HeaderFooter' src='ctlHeaderFooter.ascx' %>6<%@dotnet.itags.org. Register TagPrefix="cc1" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>789<cc1:TabContainer Height="250px" Width="600px" ID="TabContainer1" runat="server">10 <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Survey">11 <ContentTemplate>12 <table id="editQuizData" runat="server" width="100%" cellspacing="1" cellpadding="2" border="0" height="10">13 <tr>14 <td align="left" colspan="2">15 <asp:Label ID="lblQuizAction" Text="Edit" Font-Bold="True" runat="server" /><br>16 <asp:Label ID="lblError" runat="server" />17 </td>18 </tr>19 <tr>20 <td align="left">Title</td>21 <td align="left"><asp:TextBox ID="txtQuizTitle" Columns="80" runat="server"></asp:TextBox></td>22 </tr>23 <tr>24 <td align="left">Description</td>25 <td align="left"><asp:TextBox ID="txtQuizDescription" Columns="80" Rows="2" TextMode="MultiLine" runat="server"></asp:TextBox>26 </td>27 </tr>28 <tr>29 <td align="left">Created by</td>30 <td align="left"><asp:Label ID="lblCreatedBy" runat="server" />31 </td>32 </tr>33 <tr>34 <td align="left" valign="top">Interval</td>35 <td align="left">36 <table id="Table1" runat="server" width="100%" cellpadding="0" cellspacing="0" border="0">37 <tr>38 <td align="left" valign="top">From</td>39 <td align="left" valign="top">To</td>40 </tr>41 <tr>42 <td align="left">43 <asp:TextBox ID="CalendarQuizFrom" runat="server"></asp:TextBox>44 <cc1:CalendarExtender ID="CalendarExtender1" runat="server"45 TargetControlID="CalendarQuizFrom" Format="dd-MM-yyyy" />46 </td>47 <td align="left">48 <asp:TextBox ID="CalendarQuizTo" runat="server"></asp:TextBox>49 <cc1:CalendarExtender ID="CalendarExtender2" runat="server"50 TargetControlID="CalendarQuizTo" Format="dd-MM-yyyy" />51 </td>52 </tr>53 </table>54 </td>55 </tr>56 </table>57 </ContentTemplate>58 </cc1:TabPanel>59 <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Header">60 <ContentTemplate>61 <fcke:FckHeader runat="server" ID="FckHeader" />62 </ContentTemplate>63 </cc1:TabPanel>64 <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Footer">65 <ContentTemplate>66 <fcke:FckFooter runat="server" ID="FckFooter" />67 </ContentTemplate>68 </cc1:TabPanel>69</cc1:TabContainer>7071<center>72 <asp:Button ID="btnSave" runat="server" Text="Save"></asp:Button> 73 <asp:Button ID="btnCancel" runat="server" Text="Cancel"></asp:Button>74</center>7576<input id="hiddenLangHeaderTxt" type="hidden" name="hiddenLangHeaderTxt">77<input id="hiddenLangFooterTxt" type="hidden" name="hiddenLangFooterTxt">78<input id="hiddenFooter" type="hidden" name="hiddenFooter" runat="server">79<input id="hiddenHeader" type="hidden" name="hiddenHeader" runat="server">80

Hi Montago,

Your program works pretty well after I removed all the UserControls. So we suggest that you should use an exclusive method that remove the controls one by one until find out the exact root cause. Also, Some helpful debugging tools will make your work easy. For example,IE WebDevelopment Helper,HttpWatch,Firebug etc.

If your problem cannot be resolved , please let me know with more information.

Best regards,

Joanthan