Atlas TabStrip with Asynchronous Callback

I've been thinking about how to dynamically load the contents for different panes from the previous Tabstrip example.  I accomplished this using the UpdatePanel with the Asp.net Multiview control.  You can check the end result in the demo below.  If time permits and after working out the kinks, I'll post the source here.

Demo: http://atlas.vertigosoftware.com/atlastabstrip2/tabstrip.aspx
Source: http://blogs.vertigosoftware.com/files/alan/atlastabstrip2.aspx

Update:  I added the source after some minor code cleanup and tweaks.  There is still more work to make it better.  Some ideas include adding nice effects when or after  the update panel is updated, only reload the tab panes if they haven't been loaded yet, apply better styling and css.  Let me know if you run into any issues.




posted on Tuesday, August 22, 2006 10:33 AM by AlanL

Comments

# re: Atlas TabStrip with Asynchronous Callback

Friday, August 25, 2006 5:03 PM by djeeg
Nice work, but have you investigated the use of atlas control triggers. These can be embbed inside update panels.

<Triggers>
<atlas:ControlEventTrigger ControlID="menu1" EventName="MenuItemClick" />
</Triggers>

# re: Atlas TabStrip with Asynchronous Callback

Monday, August 28, 2006 8:16 PM by Alan Le
thanks. Yeah, originally I used event triggers for each of the tab links. However I think it's better to place the tabs in their own conditional update panel. Now new tabs can be easily be placed in that update panel without having to add new triggers.

# re: Atlas TabStrip with Asynchronous Callback

Tuesday, August 29, 2006 6:01 AM by Andrew Stopford
Hi,

Just a heads up that if your using this with master pages then you need to alter the CSS file so that

div#Tabs

becomes

div#ctl00_Main_Tabs

Andy

# Jon on Subsonic

Wednesday, August 30, 2006 6:01 AM by Andrew Stopford's Weblog
Jon asks if Subsonic should really be in Atlas, I would say not, Atlas should remain about Ajax on ASP.NET.

# re: Atlas TabStrip with Asynchronous Callback

Saturday, September 02, 2006 5:35 AM by Denis
Cool example, thanks ! i tried to convert it into a control, but it failed with a Javascript error, that in the line
var tabsElement = $('Tabs')
Tabs would have no properties.

My JS skills are not perfect at all, but i couldn't solve it so far, any help ?

Also, i couldn't find out what the dollar sign is supposed to do.

Thanks !
Denis

# re: Atlas TabStrip with Asynchronous Callback

Sunday, September 10, 2006 8:42 PM by Bryan
That's a really cool concept. It would be a nice addition to the Atlas toolkit.

Does anyone know how to convert this to a control?

# re: Atlas TabStrip with Asynchronous Callback

Monday, October 30, 2006 6:09 AM by Pablo
What about the modifications for the new version of "Atlas".?

# re: Atlas TabStrip with Asynchronous Callback

Monday, January 22, 2007 8:09 AM by Rachit
Great code but when you place the code in an user control or in master page, your javascript and CSS won't work.

e.g Tabs becomes ctl00_ContentPlaceHolder1_Applications_TabsUpdatePanel

My $0.02!