Wednesday, March 21, 2012

AJAX Accordion & tabcontrol

My scenario goes like this.

I have a Accordion control on a Master Page accting like a menu. In the accordion I have a MenuItem that has links. when I click on the header of the accordion it takes me to a specific page. On that specific page I have a Tab control that has the tabs as the names of the MenuItems in the accordion. when I select a MenuItem in the Accordion it must display the specific tab in the Tab control.

This is my code.....

Accordion

<

ajaxToolkit:AccordionID="Accordion1"runat="server"SelectedIndex="0"HeaderCssClass="accordionHeader"ContentCssClass="accordionContent"FadeTransitions="true"FramesPerSecond="40"TransitionDuration="240"AutoSize="None"Width="160px"><Panes><ajaxToolkit:AccordionPaneID="AccordionPane1"runat="server"ContentCssClass=""HeaderCssClass="">

<Header><ahref="Default.aspx"onclick="return false"class="accordionLink"> Home</a>

</Header><Content><asp:Menuid="Menu1"Runat="Server"CssClass="menu"><Items><asp:MenuItemText="Home"></asp:MenuItem><asp:MenuItemText="Collections"></asp:MenuItem><asp:MenuItemText="Affiliations"></asp:MenuItem><asp:MenuItemText="Talk to us"></asp:MenuItem><asp:MenuItemText="Contact us"></asp:MenuItem></Items></asp:Menu>

</Content> </ajaxToolkit:AccordionPane></Panes></ajaxToolkit:Accordion>

Tab Control......

<

ajaxToolkit:TabContainerID="TabContainer1"runat="server"><ajaxToolkit:TabPanelID="TabPanel1"HeaderText="Home"runat="server"><ContentTemplate><!--

your web form controls goes here

-->

</ContentTemplate></ajaxToolkit:TabPanel><ajaxToolkit:TabPanelID="TabPanel2"HeaderText="Collections"runat="server"><ContentTemplate><!--

your web form controls goes here

-->

</ContentTemplate></ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="TabPanel3"HeaderText="Affiliations"runat="server"><ContentTemplate><!--

your web form controls goes here

-->

</ContentTemplate></ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="TabPanel4"HeaderText="Talk to us"runat="server"><ContentTemplate><!--

your web form controls goes here

-->

</ContentTemplate></ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="TabPanel5"HeaderText="Contact us"runat="server"><ContentTemplate><!--

your web form controls goes here

-->

</ContentTemplate></ajaxToolkit:TabPanel></ajaxToolkit:TabContainer>

Sorry to mention that I have a menu control embeded in the Accordion Control. How do I get the selected item of the menu control?

So I can change to the appropriate tab in the Tab Control

No comments:

Post a Comment