Nested tabs in tabpanel control in ajax

Hi,

I can't understand your requirements clearly enough, can you elaborate more?

I believe he is trying to use nested tab containers. The content in one of the tabs has another tabcontainer. I am trying to do the same thing but on a post back caused by a button in one of the nested tabs the parent tabcontainer disappears.

P.Venkata -

I have a similarr requirement. The way that I do it by using usercontrols. Are familiar with them? They are great for grouping pieces of webcontent together and are programmed just like you'd program an asp page.

If have a top level of tabs like this... within the user controls I may or maynot, depending upon the needs of the tab, have a tabcontainer in it which will contain sub-tabs. I also derive all of my UserControls from a super usercontrol which inherits from the UserControl class, but also has some properties which all my user controls need, like the ItemID that they are derived from, see below for the sample code. My ItemControl contains a few abstract functions that I want all of the derived controls to override, this way I can set the ID value from the webpage that contains the tab panel and then call LoadData and have the controls all load themselves from the database or do whatever is required to update themselves.

Hope this helps and is clear,

Rick

-->Top level TabContainer

<AjaxTK:TabContainerID="TopLevelTabs"runat="server"ActiveTabIndex="0">

<AjaxTK:TabPanelID="Tab1"HeaderText="Tab1"runat="server">

<ContentTemplate>

<divid="Div1"class="tabContent"style="width: 100%; height: 100%;"runat="server">

<UC1:Page1ID="Lvl1_Page1"runat="server"/>

</div>

</ContentTemplate>

</AjaxTK:TabPanel>

<AjaxTK:TabPanelID="Tab2"HeaderText="Tab2"runat="server">

<ContentTemplate>

<divid="Div2"class="tabContent"style="width: 100%; height: 100%;"runat="server">

<UC1:Page2ID="Lvl1_Page2"runat="server"/>

</div>

</ContentTemplate>

</AjaxTK:TabPanel>

<AjaxTK:TabPanelID="Tab3"HeaderText="Tab3"runat="server">

<ContentTemplate>

<divid="Div3"class="tabContent"style="width: 100%; height: 100%;"runat="Server">

<UC3:Page3ID="Lvl1_Page3"runat="server"/>

</div>

</ContentTemplate>

</AjaxTK:TabPanel>

</AjaxTK:TabContainer>

--> base UserControl

publicabstractclassItemControl :UserControl

{publicint ItemID

{

get

{

return ViewState["ItemID"] !=null ?Convert.ToInt32(ViewState["ItemID"].ToString()) : 0;

}

set

{

ViewState["ItemID"] =value;

}

}

protectedabstractvoid ClearPage();

protectedabstractvoid Enable(bool bEnable);

protected abstract void LoadData();

}

I'm assuming that you have already set up your website as an AJAX-enabled website (If it is not set up that way, please do so...). I believe this is what you are looking for... tabs within tabs... correct?

Hope this helps!

(mark as answer if this answers your question. :) )

1<asp:ScriptManager ID="ScriptManager1" runat="server">2 </asp:ScriptManager>34 <cc1:TabContainer ID="RootTabContainer" runat="server">5 <cc1:TabPanel HeaderText="This is Root1" runat="server" >6 <ContentTemplate>7 Root Tab Data189 <cc1:TabContainer ID="NestedTabContainer1" runat="server">10 <cc1:TabPanel HeaderText="Nested 1" runat="server">11 <ContentTemplate>12 Nested Tab Data113 </ContentTemplate>14 </cc1:TabPanel>1516 <cc1:TabPanel HeaderText="Nested 2" runat="server">17 <ContentTemplate>18 Nested Tab Data219 </ContentTemplate>20 </cc1:TabPanel>2122 <cc1:TabPanel HeaderText="Nested 3" runat="server">23 <ContentTemplate>24 Nested Tab Data325 </ContentTemplate>26 </cc1:TabPanel>272829 </cc1:TabContainer>303132 </ContentTemplate>33 </cc1:TabPanel>3435 <cc1:TabPanel HeaderText="This is Root2" runat="server">36 <ContentTemplate>37 Root Tab Data23839 <cc1:TabContainer ID="NestedTabContainer2" runat="server">40 <cc1:TabPanel HeaderText="More Nested Tabs" runat="server">41 <ContentTemplate>42 More Nested Tab Data 143 </ContentTemplate>44 </cc1:TabPanel>4546 <cc1:TabPanel HeaderText="...Nested Tabs" runat="server">47 <ContentTemplate>48 More Nested Tab Data 249 </ContentTemplate>50 </cc1:TabPanel>5152 </cc1:TabContainer>53545556 </ContentTemplate>57 </cc1:TabPanel>5859 <cc1:TabPanel HeaderText="This is Root3" runat="server">60 <ContentTemplate>61 Root Tab Data362 </ContentTemplate>63 </cc1:TabPanel>6465 </cc1:TabContainer>