Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > TabStrip > Client-side tab switching using update panels

• Rob

  Posted on Sep 11, 2008 (permalink)

  Requirements
  RadControls version	ASP.Net Ajax 2008.2 SP1 (2008.2.826.35)
  .NET version	3.5
  Visual Studio version	2008
  programming language	C#
  browser support	all browsers supported by RadControls

  
   
  PROJECT DESCRIPTION
  This project shows a simple way for tab switching to be done client-side but appear to be client-side using update panels.
  
  The main benefit of undertaking tab switching in this way is that only the visible page is rendered in the browser. Therefore, if the tabs contain a lot of information or other controls, the initial page download size/speed can be greatly reduced.
  
  Additionally, postbacks to the server are far smaller as only the form elements on the visible page (and their viewstate) are posted back to the server, making it quicker.
  
  Unzip the project and open it in Visual Studio. All that is required is the .Net 3.5 version of your control library to be in the root of the project.
  
  Kind regards,
  
  Rob
  

  Attached files

  • RadTabs_ServerSwitch.zip

  Reply

• Paul Paul

  Posted on Sep 16, 2008 (permalink)

  Thanks for the provided sample, Rob.
  
  Another possible approach is to use RadAjaxManager instead of update panels.
  
  

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

  <asp:ScriptManager ID="sm" runat="server" />

  <telerik:RadTabStrip ID="radTabs" runat="server" MultiPageID="rmpPages" SelectedIndex="0"

  AutoPostBack="True" ClickSelectedTab="True">

  <Tabs>

  <telerik:RadTab runat="server" PageViewID="pgvOne" Text="One" />

  <telerik:RadTab runat="server" PageViewID="pgvTwo" Text="Two" />

  <telerik:RadTab runat="server" PageViewID="pgvThree" Text="Three" />

  </Tabs>

  </telerik:RadTabStrip>

  <telerik:RadMultiPage ID="rmpPages" runat="server" SelectedIndex="0" RenderSelectedPageOnly="True">

  <telerik:RadPageView ID="pgvOne" runat="server">

  Some Content on Page One

  </telerik:RadPageView>

  <telerik:RadPageView ID="pgvTwo" runat="server">

  Some Content on Page Two

  </telerik:RadPageView>

  <telerik:RadPageView ID="pgvThree" runat="server">

  Some Content on Page Three

  </telerik:RadPageView>

  </telerik:RadMultiPage>

  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

  <AjaxSettings>

  <telerik:AjaxSetting AjaxControlID="radTabs">

  <UpdatedControls>

  <telerik:AjaxUpdatedControl ControlID="radTabs" />

  <telerik:AjaxUpdatedControl ControlID="rmpPages" />

  </UpdatedControls>

  </telerik:AjaxSetting>

  </AjaxSettings>

  </telerik:RadAjaxManager>

  </form>

  
  
  Best wishes,
  Paul
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  Reply

Back to Top

Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > TabStrip > Client-side tab switching using update panels