<< Special GridView | Image Slideshow with fading effect >>

Two rows of tab headers in TabContainer in Ajax Control Toolkit

Posted by Nazar Rizvi on 10/12/2007 3:27 AM | Comments (34)

I had this issue where I wanted more than one row of headers in the TabContainer as I had a large number of panels and was not able to fit them in the page.

Here is the solution. [make sure you download the toolkit with source]

Open the AJAX Control Toolkit's solution by clicking on the solution file inside the toolkit folder.

Open the file Tabs.css under AjaxControlToolkit/Tabs/Tabs.css

And make the following changes.

/* default layout */.ajax__tab_default .ajax__tab_header {}

.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}

.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}

.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

Now click on Build -> Build Solution to build the solution.

Use the AjaxControlToolkit.dll under ToolkitTests/Bin folder as your reference from now on.

Add this dll file as reference to your current website and you should have the 2 rows.

226d08c8-1682-4ae5-b20f-189bc9acab0c|15|3.9

Editing all the rows in a GridView (Bulk edit)I was trying to find a solution which did bulk updating for all the rows in a gridview, as the gridv...Image Display: ASP.net AJAXIf you have an image search built in your application and want to have a display similar to that of ...Image Slideshow with fading effectI have been trying to use the slideshow control so that the images fade in and fade out. I tried sea...

Comments (34) -

This is very good! One thing, is it possible to do this in a separate css file included in my project and not in the "original"? I've tried and I can style the TabContainer as I like, except for the css-classes in your article. Any changes to these in my cutsom css file seem to be ignored!

Auband...

Yes, you are right when we try to create seperate classes and implement it. It doesn't allow us to do it. I too thought we could alter it but wasn't successful. Maybe someone else might have a better solution.

it is very useful for me

Ro,
Good to hear that

it is very good and useful
but i want paging to tab is it possible?
how?
any idea?
Thanks...

Atul:
Do you mean paging enabled with different tabs displayed for different pages ???

i want to customize i-e, colouring the tabs, can u give me some idea how to do that....

Avinash:
Nice idea. I shall look into it and inform you.

Hi,

Great example, out of curiosity, can't we add in out custom css files the lines you mentioned ...

/* Custom Css */
/* default layout */.ajax__tab_default .ajax__tab_header {}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

Cheers,

Sreedhar Vankayala

Good article Nazar!

FYI, Sreedhar and others - I simply added the following "white-space" settings to the first line of your CSS example and it worked in my website's CSS with me having to compile a new AJAX .dll:

.ajax__tab_default .ajax__tab_header {white-space:normal!important;}

Kindest regards,
Chuck Barest

Hi,
Thanks for the post..Is it possible to display only one tab row at a time and other rows with scrolling option.Something like IE7 tab bar?

Thanks in advance

Thanks Nazar and thanks Chuck Barest, it helped very much.

Chuck:
Yep good one there. Works fine when I tested it out too. Thanks for digging into it.

-Nazar

Vijay:

What exactly do you want to achieve???

The only problem? The row with the least amount of tabs should be on top. But that's inmpossible.

Mike:

Yes you are right. We can not achieve that. Maybe there is another hack which we don't know. But logically speaking it can not be achieved.

[But we know everything can be achieved in programming one way or the other]

css Cursor examples , Properties , Attribute - - css-lessons.ucoz.com/cursor-css-examples.htm

<samp>
i just add in my *.ascx file

tag at the top:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd">;

then:
style type="text/css"
.ajax__tab_xp .ajax__tab_header {white-space:normal;}
/style>

and:
...
ajaxToolkit:TabContainer runat="server" ID="GIListTabs" Width="100%" CssClass="ajax__tab_xp"
...

Thats is all. Good luck!!

Riddy,

Excellent, I didn't want to recompile my ControlToolkit, so your solution is the easiest.

Cheers

Riddy thats another way to do it. Doing that will just overwrite the existing CSS of tab control. If this functionality is required on one page you can do that.

Hi,
Nazar

Excellent work,
Keep it up

Hi Nazar,

Thanks !!!
Excelent Work !!

Cheers,

Thank you, this is exactly what I needed!!

Is there any reason why this wouldn't work within a master page? I've tried both riddy and Chuck Barest's solutions without luck. I've tried adding the style in-line in the master page and also within my external CSS stylesheet.

I have mine in a masterpage and it works perfectly fine. Is there anything which we are missing.

/* default layout */.ajax__tab_default .ajax__tab_header {}

.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}

.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}

.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

I have tried using the above but get loads of errors:

'-moz-inline-box ' is not a valid value for the display property.
'overflow-x' is not a known CSS property name.
'overflow-y' is not a known CSS property name.

Thanks i find this from lot of search..

hi there

i have tried everything here.. but it still wont create multiple levels of tabs.

what am i doing wrong?

i change the white-space value in tabs.css file that sits on my c: drive.. then i build the project and run it... and the panels do not wrap... anyone have any ideas?

Hi Nazar,

Thanks for the nice article!! I have a page in which I have the Ajax tab control with 4 tabs. Within each tab control I have a gridview with one of its field as hyperlink. Now when I click on the hyperlink it goes to Page1.aspx. I have a back button in that page which takes me back to the parent page, but if I clicked the hyper link from tab 3, on returning through the back button the active tab resets to tab 1. Is there any way I can remember the current active tab from which the hyperlink was clicked on returning through the back button??

Thanks in advance..

Kets:
You need to build the AJAX dll. Did you build the ajax dll or your own project?

Magrata:
I totally understand your situation. The control does not provide us that much flexibility. What you can do is have something saved in Session and load that tab or some other HTML hack job(I do not think this would work but you can give it a try).

Within that update panel control I have a Tab-Container with 5 tabs. All 5 tabs have 1 gridview that is filled on load. If I filter the gridview in the 4th or 5th tab the content from tab 3 is also displayed in tab 4 or 5. If I change the tab and go back the output is correct again.I am using IE 7 and 8 and on both browsers the problem appear. Do you have a idea why that happen and how I can fix that?Thank you!

In design view style sheet has effect but in browser its dsplayin as previous one can help me?

Suresh, which browser are you using and can you provide sample code or more detail?

It Works!!!!!!
Step 1.Place the css style tag in-between the 'head' tag of you page:
<head id="Head1" runat="server">
<style type="text/css">
.ajax__tab_xp .ajax__tab_header {white-space:normal!important;}
</style>
</head>

Step 2. set the CssClass to default as shown below:
<AjaxControlToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="14" CssClass="ajax__tab_xp" Width="654px">

There you have it. Enjoy coding.
Always make complex stuff easy for others to learn.
Cheers!!!!!!!!