Buildup all tabs then hide and show on tab click

2 posts, 0 answers
  1. PhilH
    PhilH avatar
    1 posts
    Member since:
    Jan 2013

    Posted 18 Sep 2014 Link to this post


    I've got a tabstrip that and at present I build up the first level based on a mapping list in SharePoint, when a tab is clicked I then build the next level again based on the mapping list and the tab value selected. again for the final level it is built up using  the same process.

    This is proving to be time inefficient and I need to know if I can build all three levels on page load and when a tab is clicked it will show only those tabs that have the clicked tab as a parent value.

    Level 1    tab-a          tab-b          tab-c

    Level 2    tab-a1        tab-a2        tab-a3        tab-b1        tab-b2        tab-c1        tab-c2

    Level 3    tab-a1a      tab-a1b      tab-a2a      tab-a2b      tab-a3a      tab-a3b      tab-b1a      tab-b2a      tab-c1a      tab-c2a

    so here, the 3 levels would be built on page load and when tab-1 is selected then the second level is shown with only tab-a1, tab-a2 and tab-a3 shown and when tab-a3 is then clicked then the third level is displayed with only tab-a3a and tab-a3b shown.

    hope what I'm asking makes sense

  2. Nencho
    Nencho avatar
    1784 posts

    Posted 23 Sep 2014 Link to this post

    Hello Rich,

    In order to add all the of the Tabs at Page_Load, you could use the Tabs Collection of each tab, in order to add the child tabs in the following manner :

    protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)
                RadTab tab = new RadTab("tab-a");
                tab.Tabs.Add(new RadTab("tab-a1"));
                tab.Tabs.Add(new RadTab("tab-a2"));
                tab.Tabs.Add(new RadTab("tab-a3"));

    In addition, another approach which you could use is to create the child Tabs at the TabClick server-side event. Thus you will avoid the initial time for creating all of the tabs and use the handler to add only the child tabs, to the currently clicked one.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top