Client-side tab switching using update panels

Thread is closed for posting
2 posts, 0 answers
  1. 73775543-00FD-47E9-992E-5FA200A0DD98
    73775543-00FD-47E9-992E-5FA200A0DD98 avatar
    34 posts
    Member since:
    Nov 2007

    Posted 11 Sep 2008 Link to this post

    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
  3. 300D5976-BFAC-4403-937D-074AFC183EE2
    300D5976-BFAC-4403-937D-074AFC183EE2 avatar
    4281 posts
    Member since:
    Sep 2012

    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">  
        <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.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.