Client-side tab switching using update panels

2 posts, 0 answers
  1. Rob
    Rob avatar
    34 posts
    Member since:
    Nov 2007

    Posted 11 Sep 2008 Link to this post


    RadControls version

    ASP.Net Ajax 2008.2 SP1 (2008.2.826.35)
    .NET version

    Visual Studio version 2008
    programming language

    browser support

    all browsers supported by RadControls

    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,

  2. Paul
    Paul avatar
    4281 posts

    Posted 16 Sep 2008 Link to this post

    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">  
            <telerik:RadTab runat="server" PageViewID="pgvOne" Text="One" /> 
            <telerik:RadTab runat="server" PageViewID="pgvTwo" Text="Two" /> 
            <telerik:RadTab runat="server" PageViewID="pgvThree" Text="Three" /> 
    <telerik:RadMultiPage ID="rmpPages" runat="server" SelectedIndex="0" RenderSelectedPageOnly="True">  
        <telerik:RadPageView ID="pgvOne" runat="server">  
            Some Content on Page One  
        <telerik:RadPageView ID="pgvTwo" runat="server">  
            Some Content on Page Two  
        <telerik:RadPageView ID="pgvThree" runat="server">  
            Some Content on Page Three  
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
            <telerik:AjaxSetting AjaxControlID="radTabs">  
                    <telerik:AjaxUpdatedControl ControlID="radTabs" /> 
                    <telerik:AjaxUpdatedControl ControlID="rmpPages" /> 

    Best wishes,
    the Telerik team

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