Highlight tabpanel by clicking hyperlink

Question

0.00/5 (No votes)

See more:

Hello sir or madam,
I am using Accordian panel control. In that I have 3 hyperlinks, and I have a tab container. In the tabcontainer I have 3 tabpanels. My requirement is that whenever I click one hyperlink, the appropriate tabpanel should be opened.
I have been trying this for 4 days. It is not coming please can any one help me?

My code is below:

XML

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="DashBoardPage.aspx.cs" Inherits="DashBoardPage" Title="Dash Board" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="html/StyleDashBoard.css" rel="stylesheet" type="text/css" />
    <link href="html/css.css" rel="stylesheet" type="text/css" />
    <link href="html/StyleSheet2.css" rel="stylesheet" type="text/css" />

    <%--<script language="javascript" type="text/javascript">
        function OpenTab(tabId) {
            document.getElementById('tab1').style.display = 'none';
            document.getElementById('tab2').style.display = 'none';
            document.getElementById('tab2').style.display = 'none';

            document.getElementById('tab' + tabId).style.display = 'block';
        }
</script>--%>


    <script type="text/javascript" language="javascript">
        function AccChangeIndex(value)
        {
        //debugger
            try {
                var accHost = $find('dnn_ctr512_RioFaq_MyAccordion_AccordionPane1');
                accHost.set_SelectedIndex(value);
                }
            catch (ex)
               { }
        }
</script>


    <%--<script type="text/javascript">
        function AccChangeIndex(value) {
       //debugger
       try {
           var accHost = $find('dnn_ctr512_RioFaq_AccordionFAQ_AccordionExtender');
           accHost.set_SelectedIndex(value);
       }
       catch (ex)
               { }
   }


        function PanelClick(sender, e) {
            var Messages = $get('<%=Messages.ClientID%>');
            Highlight(Messages);
        }

        function ActiveTabChanged(sender, e) {
            var CurrentTab = $get('<%=CurrentTab.ClientID%>');
            CurrentTab.innerHTML = sender.get_activeTab().get_headerText();
            Highlight(CurrentTab);
        }

        var HighlightAnimations = {};
        function Highlight(el) {
            if (HighlightAnimations[el.uniqueID] == null) {
                HighlightAnimations[el.uniqueID] = Sys.Extended.UI.Animation.createAnimation({
                    AnimationName : "color",
                    duration : 0.5,
                    property : "style",
                    propertyKey : "backgroundColor",
                    startValue : "#FFFF90",
                    endValue : "#FFFFFF"
                }, el);
            }
            HighlightAnimations[el.uniqueID].stop();
            HighlightAnimations[el.uniqueID].play();
        }

        function ToggleHidden(value) {
            $find('<%=Tabs.ClientID%>').get_tabs()[2].set_enabled(value);
        }
    </script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:UpdatePanel ID="UpdPanel" runat ="server">
   <ContentTemplate>
     <table >
        <tr>
           <td style=" width:160px; height:600px; top:0px;" valign ="top" >

               <asp:UpdatePanel ID="UpdatePanel1" runat="server">
               <ContentTemplate>
                <cc1:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
                    HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                    ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
                    TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">

               <%--<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions ="true" SelectedIndex="0"
               TransitionDuration ="200" HeaderCssClass ="accordianHeaderClass" ContentCssClass ="accordianContent"
               HeaderSelectedCssClass="accordianHeaderSelected">--%>

               <Panes>

                    <cc1:AccordionPane id="AccordionPane1" runat="server">
                        <Header>DASH BOARD</Header>
                            <Content>

                           <%--<a id="link" onclick="javascript:AccChangeIndex('<%# DataBinder.Eval(Container,"ItemIndex") %>')"
                       style="color: #45BFE0; cursor: pointer; cursor: hand;">
                       <%#Eval("CategoryName")%></a>--%>


                               <%--  <a href="javascript:OpenTab(1);"> Open Tab 1 </a>
                              <a href="javascript:OpenTab(2);"> Open Tab 2 </a> --%>

                              <a id="link" onclick="javascript:AccChangeIndex('<%# DataBinder.Eval(TabContainer1,"ItemIndex") %>')"
                                style="color: #45BFE0; cursor: pointer; cursor: hand;">
                                <%#Eval("CategoryName")%></a>

                                Today Summary<br />
                                Store EOD/SODs<br />
                                Sales Summary<br />
                                Sales Difference<br />




                            </Content>
                     </cc1:AccordionPane>
                     <cc1:AccordionPane id="AccordionPane2" runat="server">
                         <Header>OTHER REPORTS
                         </Header>
                             <Content>
                               <br />
                               <br />

                             </Content>
                     </cc1:AccordionPane>


               </Panes>
               </cc1:Accordion>
               </ContentTemplate>
               </asp:UpdatePanel>

           </td>


           <td style="width:920px; height:600px; " class="TabBackGroundColor" >
           <table  align="center" style="left :20px; right :20px; top:20px; bottom :20px;"><tr><td>

             <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
                   ForeColor="Black" Font-Bold="true"
                   Width="850px" Height="530" TabIndex="0">


                <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Sales" TabIndex="0" BorderColor="Red" BorderStyle="Solid" BorderWidth="3px"   >
                 <HeaderTemplate >
                        Sales
                 </HeaderTemplate>
                <ContentTemplate >
                    <table  >
                        <tr>
                            <td style="width:330px; height:520px; top:0px;" valign ="top" class="TabBackGroundColor"  >
                                <table>

                                   <tr>
                                        <td class="Table1BackGroundColor">
                                            <asp:RadioButton ID="RBtnBarChart" runat="server"
                                                GroupName="GrRb" Text="BarChart" Checked="True"  />
                                        </td>
                                        <td class="Table1BackGroundColor">
                                            <asp:RadioButton ID="RBtnPieChart" runat="server"
                                                GroupName="GrRb" Text="PieChart" TabIndex="1" />
                                        </td>
                                 </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor " align ="left"  >Start Date
                                            <asp:TextBox ID="txtstartdt" runat ="server" Width="130px" ></asp:TextBox>
                                            <cc1:CalendarExtender ID="CalendarExtender1" runat="server"
                                                TargetControlID ="txtstartdt" Enabled="True">
                                            </cc1:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="RFVTabPanel1" runat="server" ControlToValidate ="txtstartdt" ValidationGroup ="GR1"
                                              Text ="*"></asp:RequiredFieldValidator>
                                        </td>
                                        <td   class="Table1BackGroundColor ">End Date
                                            <asp:TextBox ID="txtenddt" runat ="server" Width="130px"
                                                style="margin-top: 0px" ></asp:TextBox>
                                            <cc1:CalendarExtender ID="CalendarExtender2" runat="server"
                                                TargetControlID="txtenddt" Enabled="True">
                                            </cc1:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="RFVTabPanel2" runat="server" ControlToValidate ="txtenddt" ValidationGroup ="GR1"
                                              Text ="*"></asp:RequiredFieldValidator>
                                        </td>
                                 </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor" >Location


                                             <asp:DropDownList ID="DDLLocation" runat="server"
                                                Font-Size="Small" width="135px" Font-Names="Calibri">
                                             </asp:DropDownList>
                                        </td>

                                        <td   class="Table1BackGroundColor " >Search On
                                            <asp:DropDownList ID="DDLSearch" runat="server"
                                             Font-Size="Small" width="135px" Font-Names="Calibri" >


                                                    <asp:ListItem text="Groups" value="1"></asp:ListItem>
                                                    <asp:ListItem Text="Department" Value="2"></asp:ListItem>
                                                    <asp:ListItem text="Category" value="3"></asp:ListItem>
                                                    <asp:ListItem text="Sub Groups" value="4"></asp:ListItem>
                                             </asp:DropDownList>


                                       </td>
                                </tr>
                                 <tr>
                                        <td>
                                           <asp:Button ID="BtnDisplay" runat ="server" Text="Show" ValidationGroup ="GR1"
                                                onclick="BtnDisplay_Click" />

                                        </td>
                                        <td>

                                            &nbsp;
                                       </td>
                                </tr>
                            </table>

                        </td>
                        <td style="width:515px; height:520px; top :0px;left:340px " valign ="middle" align="center" class="TabBackGroundColor"  >
                                   <table  >
                                        <tr>
                                            <td >
                                                <asp:Chart ID="Chart1" runat="server"
                                                    Height="380px" Width="425px" Visible="False"
                                                    BackGradientStyle="LeftRight">
                                                    <%--<BorderSkin SkinStyle="Sunken"   />--%>
                                                    <series>
                                                        <asp:Series Name="GroupTotal" BorderWidth="3" IsValueShownAsLabel="True"
                                                            IsXValueIndexed="True" Label="#PERCENT{P2}" ChartArea="ChartArea1">


                                                        </asp:Series>
                                                    </series>
                                                    <chartareas>
                                                        <asp:ChartArea Name="ChartArea1">

                                                        </asp:ChartArea>
                                                    </chartareas>
                                                </asp:Chart>


                                                <asp:Chart ID="Chart2" runat="server"
                                                    Height="380px" Width="425px" Visible ="False">
                                                    <%-- <BorderSkin BackGradientStyle="LeftRight"  SkinStyle="Sunken" />--%>
                                                        <series>
                                                            <asp:Series Name="GroupTotal" BorderWidth="3" ChartType="Doughnut"
                                                                Label="#VALX\n#PERCENT{P2}" ChartArea="ChartArea1">


                                                            </asp:Series>
                                                        </series>
                                                    <chartareas>
                                                        <asp:ChartArea Name="ChartArea1">
                                                        </asp:ChartArea>
                                                    </chartareas>
                                                </asp:Chart>
                                            </td>
                                       </tr>
                                </table>
                       </td>
                  </tr>

            </table>

                  </ContentTemplate>
                </cc1:TabPanel>

                <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Sales-Difference">
                     <ContentTemplate>
                        <table  >
                        <tr>
                            <td style="width:330px; height:520px; top:0px;" valign ="top" class="TabBackGroundColor"  >
                                <table>

                                   <tr>
                                        <td class="Table1BackGroundColor">
                                            <asp:RadioButton ID="RBtnBarChart2" runat="server"
                                                GroupName="GrRb" Text="BarChart" Checked="True"  />
                                        </td>
                                        <td class="Table1BackGroundColor">
                                            <asp:RadioButton ID="RBtnPieChart2" runat="server"
                                                GroupName="GrRb" Text="PieChart"  />
                                        </td>
                                 </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor " align ="left"  >Start Date
                                            <asp:TextBox ID="TxtFromDate2" runat ="server" Width="130px" ></asp:TextBox>
                                            <cc1:CalendarExtender ID="CalendarExtender3" runat="server"
                                                TargetControlID ="TxtFromDate2" Enabled="True">
                                            </cc1:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                                             Text ="*" ControlToValidate ="TxtFromDate2" ValidationGroup ="GR2"></asp:RequiredFieldValidator>
                                        </td>
                                        <td   class="Table1BackGroundColor ">End Date
                                            <asp:TextBox ID="TxtToDate2" runat ="server" Width="130px"
                                                style="margin-top: 0px" ></asp:TextBox>
                                            <cc1:CalendarExtender ID="CalendarExtender4" runat="server"
                                                TargetControlID="TxtToDate2" Enabled="True">
                                            </cc1:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                                             Text ="*" ControlToValidate ="TxtToDate2" ValidationGroup ="GR2"></asp:RequiredFieldValidator>
                                        </td>
                                 </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor" >Location


                                             <asp:DropDownList ID="DdlLocation2" runat="server"
                                                Font-Size="Small" width="135px" Font-Names="Calibri" AutoPostBack="True">
                                             </asp:DropDownList>
                                        </td>

                                        <td   class="Table1BackGroundColor " >Search On
                                            <asp:DropDownList ID="DdlSearch2" runat="server"
                                             Font-Size="Small" width="135px" Font-Names="Calibri"
                                                onselectedindexchanged="DdlSearch2_SelectedIndexChanged"
                                                AutoPostBack="True" >


                                                    <asp:ListItem text="Groups" value="1"></asp:ListItem>
                                                    <asp:ListItem Text="Department" Value="2"></asp:ListItem>
                                                    <asp:ListItem text="Category" value="3"></asp:ListItem>
                                                    <asp:ListItem text="Sub Groups" value="4"></asp:ListItem>
                                             </asp:DropDownList>


                                       </td>
                                </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor ">
                                        <asp:Label ID="LblFind2" runat="server" text="Find All" Width="70px"></asp:Label>
                                            <asp:DropDownList ID="DDLFind2" runat="server"
                                                    Font-Size="Small" width="135px" Font-Names="Calibri">
                                            </asp:DropDownList>
                                        </td>
                                        <td>
                                           <asp:Button ID="BtnShow" runat ="server" Text="Show" onclick="BtnShow_Click" ValidationGroup ="GR2" />

                                        </td>

                                </tr>
                            </table>

                        </td>
                        <td style="width:515px; height:520px; top :0px;left:340px " valign ="middle" align="center" class="TabBackGroundColor"  >
                                   <table  >
                                        <tr>
                                            <td >
                                                <asp:Chart ID="Chart3" runat="server"
                                                    Height="380px" Width="425px" Visible="False"
                                                    BackGradientStyle="LeftRight">
                                                    <%--<BorderSkin SkinStyle="Sunken"   />--%>
                                                    <series>
                                                        <asp:Series Name="GroupTotal" BorderWidth="3" IsValueShownAsLabel="True"
                                                            IsXValueIndexed="True" Label="#PERCENT{P2}" ChartArea="ChartArea1">


                                                        </asp:Series>
                                                    </series>
                                                    <chartareas>
                                                        <asp:ChartArea Name="ChartArea1">

                                                        </asp:ChartArea>
                                                    </chartareas>
                                                </asp:Chart>


                                                <asp:Chart ID="Chart4" runat="server"
                                                    Height="380px" Width="425px" Visible ="False">
                                                     <%--<BorderSkin BackGradientStyle="LeftRight" SkinStyle="Sunken" />--%>
                                                        <series>
                                                            <asp:Series Name="GroupTotal" BorderWidth="3" ChartType="Doughnut"
                                                                Label="#VALX\n#PERCENT{P2}" ChartArea="ChartArea1">


                                                            </asp:Series>
                                                        </series>
                                                    <chartareas>
                                                        <asp:ChartArea Name="ChartArea1">
                                                        </asp:ChartArea>
                                                    </chartareas>
                                                </asp:Chart>
                                            </td>
                                       </tr>
                                </table>
                       </td>
                  </tr>

            </table>
                      </ContentTemplate>
                  </cc1:TabPanel>

                <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Summary">
                     <HeaderTemplate>
                         Summary
                     </HeaderTemplate>
                     <ContentTemplate>

                      </ContentTemplate>
                </cc1:TabPanel>

            </cc1:TabContainer>
      </td></tr></table>

         </td>
       </tr>
     </table>


   </ContentTemplate>
 </asp:UpdatePanel>


</asp:Content>

XML

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="DashBoardPage.aspx.cs" Inherits="DashBoardPage" Title="Dash Board" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="html/StyleDashBoard.css" rel="stylesheet" type="text/css" />
    <link href="html/css.css" rel="stylesheet" type="text/css" />
    <link href="html/StyleSheet2.css" rel="stylesheet" type="text/css" />

    <%--<script language="javascript" type="text/javascript">
        function OpenTab(tabId) {
            document.getElementById('tab1').style.display = 'none';
            document.getElementById('tab2').style.display = 'none';
            document.getElementById('tab2').style.display = 'none';

            document.getElementById('tab' + tabId).style.display = 'block';
        }
</script>--%>


    <script type="text/javascript" language="javascript">
        function AccChangeIndex(value)
        {
        //debugger
            try {
                var accHost = $find('dnn_ctr512_RioFaq_MyAccordion_AccordionPane1');
                accHost.set_SelectedIndex(value);
                }
            catch (ex)
               { }
        }
</script>


    <%--<script type="text/javascript">
        function AccChangeIndex(value) {
       //debugger
       try {
           var accHost = $find('dnn_ctr512_RioFaq_AccordionFAQ_AccordionExtender');
           accHost.set_SelectedIndex(value);
       }
       catch (ex)
               { }
   }


        function PanelClick(sender, e) {
            var Messages = $get('<%=Messages.ClientID%>');
            Highlight(Messages);
        }

        function ActiveTabChanged(sender, e) {
            var CurrentTab = $get('<%=CurrentTab.ClientID%>');
            CurrentTab.innerHTML = sender.get_activeTab().get_headerText();
            Highlight(CurrentTab);
        }

        var HighlightAnimations = {};
        function Highlight(el) {
            if (HighlightAnimations[el.uniqueID] == null) {
                HighlightAnimations[el.uniqueID] = Sys.Extended.UI.Animation.createAnimation({
                    AnimationName : "color",
                    duration : 0.5,
                    property : "style",
                    propertyKey : "backgroundColor",
                    startValue : "#FFFF90",
                    endValue : "#FFFFFF"
                }, el);
            }
            HighlightAnimations[el.uniqueID].stop();
            HighlightAnimations[el.uniqueID].play();
        }

        function ToggleHidden(value) {
            $find('<%=Tabs.ClientID%>').get_tabs()[2].set_enabled(value);
        }
    </script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:UpdatePanel ID="UpdPanel" runat ="server">
   <ContentTemplate>
     <table >
        <tr>
           <td style=" width:160px; height:600px; top:0px;" valign ="top" >

               <asp:UpdatePanel ID="UpdatePanel1" runat="server">
               <ContentTemplate>
                <cc1:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
                    HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                    ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
                    TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">

               <%--<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions ="true" SelectedIndex="0"
               TransitionDuration ="200" HeaderCssClass ="accordianHeaderClass" ContentCssClass ="accordianContent"
               HeaderSelectedCssClass="accordianHeaderSelected">--%>

               <Panes>

                    <cc1:AccordionPane id="AccordionPane1" runat="server">
                        <Header>DASH BOARD</Header>
                            <Content>

                           <%--<a id="link" onclick="javascript:AccChangeIndex('<%# DataBinder.Eval(Container,"ItemIndex") %>')"
                       style="color: #45BFE0; cursor: pointer; cursor: hand;">
                       <%#Eval("CategoryName")%></a>--%>


                               <%--  <a href="javascript:OpenTab(1);"> Open Tab 1 </a>
                              <a href="javascript:OpenTab(2);"> Open Tab 2 </a> --%>

                              <a id="link" onclick="javascript:AccChangeIndex('<%# DataBinder.Eval(TabContainer1,"ItemIndex") %>')"
                                style="color: #45BFE0; cursor: pointer; cursor: hand;">
                                <%#Eval("CategoryName")%></a>

                                Today Summary<br />
                                Store EOD/SODs<br />
                                Sales Summary<br />
                                Sales Difference<br />




                            </Content>
                     </cc1:AccordionPane>
                     <cc1:AccordionPane id="AccordionPane2" runat="server">
                         <Header>OTHER REPORTS
                         </Header>
                             <Content>
                               <br />
                               <br />

                             </Content>
                     </cc1:AccordionPane>


               </Panes>
               </cc1:Accordion>
               </ContentTemplate>
               </asp:UpdatePanel>

           </td>


           <td style="width:920px; height:600px; " class="TabBackGroundColor" >
           <table  align="center" style="left :20px; right :20px; top:20px; bottom :20px;"><tr><td>

             <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
                   ForeColor="Black" Font-Bold="true"
                   Width="850px" Height="530" TabIndex="0">


                <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Sales" TabIndex="0" BorderColor="Red" BorderStyle="Solid" BorderWidth="3px"   >
                 <HeaderTemplate >
                        Sales
                 </HeaderTemplate>
                <ContentTemplate >
                    <table  >
                        <tr>
                            <td style="width:330px; height:520px; top:0px;" valign ="top" class="TabBackGroundColor"  >
                                <table>

                                   <tr>
                                        <td class="Table1BackGroundColor">
                                            <asp:RadioButton ID="RBtnBarChart" runat="server"
                                                GroupName="GrRb" Text="BarChart" Checked="True"  />
                                        </td>
                                        <td class="Table1BackGroundColor">
                                            <asp:RadioButton ID="RBtnPieChart" runat="server"
                                                GroupName="GrRb" Text="PieChart" TabIndex="1" />
                                        </td>
                                 </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor " align ="left"  >Start Date
                                            <asp:TextBox ID="txtstartdt" runat ="server" Width="130px" ></asp:TextBox>
                                            <cc1:CalendarExtender ID="CalendarExtender1" runat="server"
                                                TargetControlID ="txtstartdt" Enabled="True">
                                            </cc1:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="RFVTabPanel1" runat="server" ControlToValidate ="txtstartdt" ValidationGroup ="GR1"
                                              Text ="*"></asp:RequiredFieldValidator>
                                        </td>
                                        <td   class="Table1BackGroundColor ">End Date
                                            <asp:TextBox ID="txtenddt" runat ="server" Width="130px"
                                                style="margin-top: 0px" ></asp:TextBox>
                                            <cc1:CalendarExtender ID="CalendarExtender2" runat="server"
                                                TargetControlID="txtenddt" Enabled="True">
                                            </cc1:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="RFVTabPanel2" runat="server" ControlToValidate ="txtenddt" ValidationGroup ="GR1"
                                              Text ="*"></asp:RequiredFieldValidator>
                                        </td>
                                 </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor" >Location


                                             <asp:DropDownList ID="DDLLocation" runat="server"
                                                Font-Size="Small" width="135px" Font-Names="Calibri">
                                             </asp:DropDownList>
                                        </td>

                                        <td   class="Table1BackGroundColor " >Search On
                                            <asp:DropDownList ID="DDLSearch" runat="server"
                                             Font-Size="Small" width="135px" Font-Names="Calibri" >


                                                    <asp:ListItem text="Groups" value="1"></asp:ListItem>
                                                    <asp:ListItem Text="Department" Value="2"></asp:ListItem>
                                                    <asp:ListItem text="Category" value="3"></asp:ListItem>
                                                    <asp:ListItem text="Sub Groups" value="4"></asp:ListItem>
                                             </asp:DropDownList>


                                       </td>
                                </tr>
                                 <tr>
                                        <td>
                                           <asp:Button ID="BtnDisplay" runat ="server" Text="Show" ValidationGroup ="GR1"
                                                onclick="BtnDisplay_Click" />

                                        </td>
                                        <td>

                                            &nbsp;
                                       </td>
                                </tr>
                            </table>

                        </td>
                        <td style="width:515px; height:520px; top :0px;left:340px " valign ="middle" align="center" class="TabBackGroundColor"  >
                                   <table  >
                                        <tr>
                                            <td >
                                                <asp:Chart ID="Chart1" runat="server"
                                                    Height="380px" Width="425px" Visible="False"
                                                    BackGradientStyle="LeftRight">
                                                    <%--<BorderSkin SkinStyle="Sunken"   />--%>
                                                    <series>
                                                        <asp:Series Name="GroupTotal" BorderWidth="3" IsValueShownAsLabel="True"
                                                            IsXValueIndexed="True" Label="#PERCENT{P2}" ChartArea="ChartArea1">


                                                        </asp:Series>
                                                    </series>
                                                    <chartareas>
                                                        <asp:ChartArea Name="ChartArea1">

                                                        </asp:ChartArea>
                                                    </chartareas>
                                                </asp:Chart>


                                                <asp:Chart ID="Chart2" runat="server"
                                                    Height="380px" Width="425px" Visible ="False">
                                                    <%-- <BorderSkin BackGradientStyle="LeftRight"  SkinStyle="Sunken" />--%>
                                                        <series>
                                                            <asp:Series Name="GroupTotal" BorderWidth="3" ChartType="Doughnut"
                                                                Label="#VALX\n#PERCENT{P2}" ChartArea="ChartArea1">


                                                            </asp:Series>
                                                        </series>
                                                    <chartareas>
                                                        <asp:ChartArea Name="ChartArea1">
                                                        </asp:ChartArea>
                                                    </chartareas>
                                                </asp:Chart>
                                            </td>
                                       </tr>
                                </table>
                       </td>
                  </tr>

            </table>

                  </ContentTemplate>
                </cc1:TabPanel>

                <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Sales-Difference">
                     <ContentTemplate>
                        <table  >
                        <tr>
                            <td style="width:330px; height:520px; top:0px;" valign ="top" class="TabBackGroundColor"  >
                                <table>

                                   <tr>
                                        <td class="Table1BackGroundColor">
                                            <asp:RadioButton ID="RBtnBarChart2" runat="server"
                                                GroupName="GrRb" Text="BarChart" Checked="True"  />
                                        </td>
                                        <td class="Table1BackGroundColor">
                                            <asp:RadioButton ID="RBtnPieChart2" runat="server"
                                                GroupName="GrRb" Text="PieChart"  />
                                        </td>
                                 </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor " align ="left"  >Start Date
                                            <asp:TextBox ID="TxtFromDate2" runat ="server" Width="130px" ></asp:TextBox>
                                            <cc1:CalendarExtender ID="CalendarExtender3" runat="server"
                                                TargetControlID ="TxtFromDate2" Enabled="True">
                                            </cc1:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                                             Text ="*" ControlToValidate ="TxtFromDate2" ValidationGroup ="GR2"></asp:RequiredFieldValidator>
                                        </td>
                                        <td   class="Table1BackGroundColor ">End Date
                                            <asp:TextBox ID="TxtToDate2" runat ="server" Width="130px"
                                                style="margin-top: 0px" ></asp:TextBox>
                                            <cc1:CalendarExtender ID="CalendarExtender4" runat="server"
                                                TargetControlID="TxtToDate2" Enabled="True">
                                            </cc1:CalendarExtender>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                                             Text ="*" ControlToValidate ="TxtToDate2" ValidationGroup ="GR2"></asp:RequiredFieldValidator>
                                        </td>
                                 </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor" >Location


                                             <asp:DropDownList ID="DdlLocation2" runat="server"
                                                Font-Size="Small" width="135px" Font-Names="Calibri" AutoPostBack="True">
                                             </asp:DropDownList>
                                        </td>

                                        <td   class="Table1BackGroundColor " >Search On
                                            <asp:DropDownList ID="DdlSearch2" runat="server"
                                             Font-Size="Small" width="135px" Font-Names="Calibri"
                                                onselectedindexchanged="DdlSearch2_SelectedIndexChanged"
                                                AutoPostBack="True" >


                                                    <asp:ListItem text="Groups" value="1"></asp:ListItem>
                                                    <asp:ListItem Text="Department" Value="2"></asp:ListItem>
                                                    <asp:ListItem text="Category" value="3"></asp:ListItem>
                                                    <asp:ListItem text="Sub Groups" value="4"></asp:ListItem>
                                             </asp:DropDownList>


                                       </td>
                                </tr>
                                 <tr>
                                        <td class="Table1BackGroundColor ">
                                        <asp:Label ID="LblFind2" runat="server" text="Find All" Width="70px"></asp:Label>
                                            <asp:DropDownList ID="DDLFind2" runat="server"
                                                    Font-Size="Small" width="135px" Font-Names="Calibri">
                                            </asp:DropDownList>
                                        </td>
                                        <td>
                                           <asp:Button ID="BtnShow" runat ="server" Text="Show" onclick="BtnShow_Click" ValidationGroup ="GR2" />

                                        </td>

                                </tr>
                            </table>

                        </td>
                        <td style="width:515px; height:520px; top :0px;left:340px " valign ="middle" align="center" class="TabBackGroundColor"  >
                                   <table  >
                                        <tr>
                                            <td >
                                                <asp:Chart ID="Chart3" runat="server"
                                                    Height="380px" Width="425px" Visible="False"
                                                    BackGradientStyle="LeftRight">
                                                    <%--<BorderSkin SkinStyle="Sunken"   />--%>
                                                    <series>
                                                        <asp:Series Name="GroupTotal" BorderWidth="3" IsValueShownAsLabel="True"
                                                            IsXValueIndexed="True" Label="#PERCENT{P2}" ChartArea="ChartArea1">


                                                        </asp:Series>
                                                    </series>
                                                    <chartareas>
                                                        <asp:ChartArea Name="ChartArea1">

                                                        </asp:ChartArea>
                                                    </chartareas>
                                                </asp:Chart>


                                                <asp:Chart ID="Chart4" runat="server"
                                                    Height="380px" Width="425px" Visible ="False">
                                                     <%--<BorderSkin BackGradientStyle="LeftRight" SkinStyle="Sunken" />--%>
                                                        <series>
                                                            <asp:Series Name="GroupTotal" BorderWidth="3" ChartType="Doughnut"
                                                                Label="#VALX\n#PERCENT{P2}" ChartArea="ChartArea1">


                                                            </asp:Series>
                                                        </series>
                                                    <chartareas>
                                                        <asp:ChartArea Name="ChartArea1">
                                                        </asp:ChartArea>
                                                    </chartareas>
                                                </asp:Chart>
                                            </td>
                                       </tr>
                                </table>
                       </td>
                  </tr>

            </table>
                      </ContentTemplate>
                  </cc1:TabPanel>

                <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Summary">
                     <HeaderTemplate>
                         Summary
                     </HeaderTemplate>
                     <ContentTemplate>

                      </ContentTemplate>
                </cc1:TabPanel>

            </cc1:TabContainer>
      </td></tr></table>

         </td>
       </tr>
     </table>


   </ContentTemplate>
 </asp:UpdatePanel>


</asp:Content>

Posted 21-Oct-10 21:46pm

sathish.jampala

Updated 21-Oct-10 22:05pm

LittleYellowBird

v2

Add a Solution

Comments

LittleYellowBird 22-Oct-10 4:07am

Hi, I am afraid that you have included far too much code in your question, very few people would have the time to study it all for you. Try to find the particular section that is not working (this is the first step to fault finding anyway) and ammend your question to have a smaller but more usefull section. :)

Sunasara Imdadhusen 22-Oct-10 7:34am

In simple you have Accordion and you want show hide based on hyper link click? i will help you after clarification.

Sunasara Imdadhusen 25-Oct-10 6:32am

did you got the result if not then please clear
What's means of "existed on top"? you mean to say it should be open?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sunasara Imdadhusen · Answer 1 · 2010-10-22T01:55:00

Hi Sathish,

This is the working solution of your problem, please copy past following code in page and replace only Header and Content of Accordion Panel.

XML

<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        // expand given accordion pane
        function ShowAccordionPane(idx) {
            $find('AccordionPane_AccordionExtender').set_SelectedIndex(idx);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td>
                <asp:HyperLink runat="server" ID="hlnk1" NavigateUrl="#" onclick="ShowAccordionPane(0);">Show Accordion Panel 1</asp:HyperLink>
            </td>
            <td>
                <asp:HyperLink runat="server" ID="hlnk2" NavigateUrl="#" onclick="ShowAccordionPane(1);">Show Accordion Panel 2</asp:HyperLink>
            </td>
            <td>
                <asp:HyperLink runat="server" ID="hlnk3" NavigateUrl="#" onclick="ShowAccordionPane(2);">Show Accordion Panel 3</asp:HyperLink>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
                <div>
                    <ajaxToolkit:Accordion ID="AccordionPane" runat="server" FadeTransitions="True" SelectedIndex="0"
                        TransitionDuration="300" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
                        <Panes>
                            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                                <Header>
                                    AccordionPane 1</Header>
                                <Content>
                                    Hi<br />
                                    My name is Imdadhusen<br />
                                </Content>
                            </ajaxToolkit:AccordionPane>
                            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                                <Header>
                                    AccordionPane 2
                                </Header>
                                <Content>
                                    Hi<br />
                                    I am a senior developer<br />
                                </Content>
                            </ajaxToolkit:AccordionPane>
                            <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                                <Header>
                                    AccordionPane 3
                                </Header>
                                <Content>
                                    Hi<br />
                                    I have 4.5 year of experience in web technology<br />
                                    I hope this would be helpful<br />
                                </Content>
                            </ajaxToolkit:AccordionPane>
                        </Panes>
                    </ajaxToolkit:Accordion>
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Please do let me know, if you have any doubt.

Please provide "Vote" if this would be helpful, and make "Accept Answer" if this would be correct answer.:rose:

Thanks,
Imdadhusen