locked
Binding Data to Accordion in Repeater Control RRS feed

  • Question

  • User1242121764 posted
    Hi,

    Is it possible to bind data to accordion control inside a repeater control? I am trying, but the page doens't display the bound values. Following is the example: 
    1    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    2            <asp:Panel ID="pnlShowResults" runat="server">
    3                <cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true"
    4                    FramesPerSecond="40" SelectedIndex="1" TransitionDuration="250">
    5                    <asp:Repeater ID="Repeater1" runat="server">
    6                        <HeaderTemplate>
    7                            Starting here
    8                        </HeaderTemplate>
    9                        <ItemTemplate>
    10                           <asp:Label ID="test" runat="server" Text='<%#Eval("givenName")%>'></asp:Label><br />
    11                           
    12                       <cc1:AccordionPane runat="server" ID="acPane">
    13                           <Header>
    14                               <a class="accordionLink" href="" onclick="return false;">
    15 <%#Eval("givenName")%> 16 </a> 17 <asp:Label ID="Label2" runat="server" Text='<%#Eval("givenName")%>'></asp:Label> 18 </Header> 19 <Content> 20 The Accordion is a web control that allows you to provide multiple panes and display 21 them one at a time. It is like having several 22 <asp:Label ID="testCo" runat="server" Text='<%#Eval("company") %>'></asp:Label><br /> 23 <%'#Eval("telephoneNumber") %> 24 <br /> 25 <%'#Eval("mail") %> 26 </Content> 27 </cc1:AccordionPane> 28 29 </ItemTemplate> 30 <FooterTemplate> 31 Finishing here 32 </FooterTemplate> 33 </asp:Repeater> 34 </cc1:Accordion> 35 </asp:Panel>
     The data displays properly on line 10, but nothing within Accordion panel. Can someone help please?

    Thank u
    Thursday, August 10, 2006 8:51 AM

All replies

  • User-778063493 posted
    I had the same problem and still waiting for someone intelligent to give me an example :)
    Friday, August 11, 2006 2:00 AM
  • User2124132298 posted
    is da databinding done on Page_Load ..
    Wednesday, November 15, 2006 4:30 AM
  • User-1769427718 posted

    HI

    I have the same problem
    I have my accordion in a reapter
    If I diable the Accoridion The data shows.

    I do my databind in page load

     protected void Page_Load(object sender, EventArgs e)
        {
            Search();

            mResults.DataSource = keywordController.GetAllCompanies();
            mResults.DataBind();
        }

    Source Code:
    <asp:UpdatePanel ID="mResultsUpdatePanel" runat="server">
                        <ContentTemplate>
                            <asp:Label ID="mSearchLabel" runat="server"></asp:Label>
                            <asp:Repeater ID="mResults" runat="server">
                                <ItemTemplate>
                                    <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
                                        ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"
                                        AutoSize="None">
                                        <Panes>
                                            <cc1:AccordionPane ID="AccordionPane1" runat="server">
                                               <Header>
                                                    <asp:PlaceHolder ID="mLogoPlaceHolder" runat="server">
                                                        <div><a href="" onclick="return false;"><%#Eval("Name") %></a>
                                                        <img src='<%#Eval("LogoURL") %>' alt="Logotyp" /></div>
                                                    </asp:PlaceHolder>
                                               </Header>
                                               <Content>
                                                    <div><%#Eval("Name") %></div>
                                                    <asp:PlaceHolder ID="mHomepagePlaceHolder" runat="server">
                                                        <div><a href='<%#Eval("HomepageURL") %>' target="_blank">Hemsida</a></div>
                                                    </asp:PlaceHolder>
                                                    <div>Kategori</div>
                                                    <div><%#Eval("CategoryName") %></div>
                                               </Content>
                                            </cc1:AccordionPane>
                                        </Panes>
                                    </cc1:Accordion>
                                </ItemTemplate>
                            </asp:Repeater>
                            <asp:Label ID="mNoHits" runat="server" Visible="false">Inga träffar</asp:Label>
                            <asp:HiddenField runat="server" ID="mHiddenPostback" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
     

     

    Does antone no how to fix this pls. 

    Monday, March 10, 2008 11:48 AM
  • User1575445258 posted

    So did anyone finally copleted this? If yes please do share the ideas. Any help would be greatly appreciated.[:D]

    Thanks & Regards,

    Sravan Kasyap K. 

     

    Friday, September 12, 2008 11:32 AM
  • User1247667309 posted

    So did anyone finally copleted this? If yes please do share the ideas. Any help would be greatly appreciated.Big Smile


    Basically you are using the elements wrong. The Accordion has its own repeater. Set the DataSourceId to the id of your datasource controller or databind yourself using Databind and the DataBind() method. 

    In anyway, use the <HeaderTemplate> and put all the controls like lables and such that has to do with the Header of the pane inside it and the content inside <ContentTemplate>. 

    Dont confuse with <Header> and <Content>.

    And that should be it. You dont need a repeater. Let me know if it works.

    Sunday, April 4, 2010 4:42 PM
  • User-1340845386 posted

    you can data bind accordion comtrol like this

     <asp:SqlDataSource ID="dsTeam" runat="server" 
            ConnectionString=""
            ProviderName="System.Data.SqlClient" 
            SelectCommand="SELECT * FROM [tblTeam]">
            
        </asp:SqlDataSource>
        
       
        
       
        <asp:Accordion ID="TeamMembers" runat="server" DataSourceID="dsTeam" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" >
                     			    <HeaderTemplate>
                     			   <%#DataBinder.Eval(Container.DataItem, "MemName")%>
                     			    </HeaderTemplate>
                     			    <ContentTemplate>
                     			  <%#DataBinder.Eval(Container.DataItem, "abtMem")%>
                     			    </ContentTemplate>
         
    </asp:Accordion>  
    Friday, July 22, 2011 5:48 AM
  • User377613556 posted

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

    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .accordionHeader
    {
        border: 1px solid #2F4F4F;
        color: white;
        background-color: #2E4d7B;
          font-family: Arial, Sans-Serif;
          font-size: 12px;
          font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
    }
     
    #master_content .accordionHeader a
    {
          color: #FFFFFF;
          background: none;
          text-decoration: none;
    }
     
    #master_content .accordionHeader a:hover
    {
          background: none;
          text-decoration: underline;
    }
     
    .accordionHeaderSelected
    {
        border: 1px solid #2F4F4F;
        color: white;
        background-color: #5078B3;
          font-family: Arial, Sans-Serif;
          font-size: 12px;
          font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
    }
     
    #master_content .accordionHeaderSelected a
    {
          color: #FFFFFF;
          background: none;
          text-decoration: none;
    }
     
    #master_content .accordionHeaderSelected a:hover
    {
          background: none;
          text-decoration: underline;
    }
     
    .accordionContent
    {
        background-color: #D3DEEF;
        border: 1px dashed #2F4F4F;
        border-top: none;
        padding: 5px;
        padding-top: 10px;
    }
    <%-------------------------------------%>

    .menuTabs
            {
                ;
                top:1px;
                left:10px;
               background-image:url("images/vllogo.pdf.gif;")}
            }
            .tab
            {
                border:Solid 1px black;
                border-bottom:none;
                padding:0px 10px;

                background-image:../images/vllogo.pdf.gif;
            }
            .selectedTab
            {
                border:Solid 1px black;
                border-bottom:Solid 1px white;
                padding:0px 10px;
                background-color:blue;
            }
            .MenuItemStatic { height:36px; width:81px; background-image:url("images/vllogo.pdf.gif;")}
            .tabBody
            {
                border:Solid 1px black;
                padding:20px;
                background-color:yellow;
            }
            .hid
            {
                display:none;
            }
        </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <table  width="400px">
            <tr>
                <td>
                    &nbsp;</td>
                <td>
                    <asp:ScriptManager ID="ScriptManager1" runat="server">
                    </asp:ScriptManager>
                </td>
            </tr>
            <tr>
                <td colspan="2">
               
                    <asp:Accordion ID="Accordion1" runat="server" FadeTransitions="True"
    SelectedIndex="0" TransitionDuration="300"  HeaderCssClass="accordionHeader"
    ContentCssClass="accordionContent">
      <Panes>
    <asp:AccordionPane id="AccordionPane1" runat="server">
    <Header> AJAX PANE</Header>
    <Content>
    AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
    AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
    AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
    AJAX HAS BEEN KNOW TO ENHANCE USER INTERFACE<br />
        <asp:Button ID="Button1" runat="server" Text="Next" />
    </Content>
    </asp:AccordionPane>
    <asp:AccordionPane id="AccordionPane2" runat="server">
    <Header>MY TEST PANE
    <table width="100%">
    <tr>
    <td>
    </td>
    <td align="right">
        <asp:Button ID="Button2" runat="server" Text="Next" />
    </td>
    </tr>
    </table>
    </Header>
    <Content>
    THIS IS JUST A TEST OF PANE CONTENT<br />
    THIS IS JUST A TEST OF PANE CONTENT<br />
    THIS IS JUST A TEST OF PANE CONTENT<br />
    </Content>
    </asp:AccordionPane>
    <asp:AccordionPane id="AccordionPane3" runat="server">
    <Header>THIS IS LAST PANE
    </Header>
    <Content>
    HOPE YOU LIKE WHAT YOU SEE<br />
    THIS IS JUST A TEST OF PANE CONTENT<br />
    HOPE YOU LIKE WHAT YOU SEE<br />
    </Content>
    </asp:AccordionPane>
    </Panes>
                    </asp:Accordion>

                  

                </td>
            </tr>
        </table>
        <asp:Menu ID="mTab" Orientation="Horizontal" runat="server"
            CssClass="menuTabs"

            StaticMenuItemStyle-CssClass="MenuItemStatic"
            StaticSelectedStyle-CssClass="selectedTab"
            onmenuitemclick="mTab_MenuItemClick" Height="50px" Width="400px">
        <Items>
            <asp:MenuItem Text="Step 1 >>" Selected="true" Value="0"></asp:MenuItem>
            <asp:MenuItem Text="Step 2 >>" Value="1" ></asp:MenuItem>
            <asp:MenuItem Text="Step 3 " Value="2"></asp:MenuItem>
        </Items>
    </asp:Menu>

    <asp:Wizard ID="wSteps" runat="server" ActiveStepIndex="0" BackColor="#F7F6F3"
            BorderColor="#990000" BorderStyle="Solid" BorderWidth="2px"
            Font-Names="Verdana" Font-Size="0.8em"
             Width="400px">
            <HeaderStyle BackColor="#5D7B9D" BorderStyle="Solid" Font-Bold="True"
                Font-Size="0.9em" ForeColor="White" HorizontalAlign="Left" />
            <NavigationButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC"
                BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"
                ForeColor="#284775" />
            <SideBarButtonStyle BorderWidth="0px" Font-Names="Verdana" ForeColor="White" />
            <SideBarStyle BackColor="#7C6F57" BorderWidth="0px" Font-Size="0.9em"
                VerticalAlign="Top" Width="100px" CssClass="hid" />
            <StepStyle BorderWidth="0px" ForeColor="#5D7B9D" />
            <WizardSteps>
                <asp:WizardStep ID="WizardStep1" runat="server" title="Start">
                    <table width="300px">
                        <tr>
                            <td width="100px">
                                &nbsp;</td>
                            <td>
                                &nbsp;</td>
                        </tr>
                      
                        <tr>
                            <td width="100px">
                                Enter Amount :</td>
                            <td>
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td width="100px">
                                Select Items :</td>
                            <td>
                                <asp:DropDownList ID="DropDownList1" runat="server">
                                    <asp:ListItem>dfgdfgrg rt</asp:ListItem>
                                    <asp:ListItem>A4 Wallpaper</asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                      
                    </table>
                </asp:WizardStep>
                <asp:WizardStep ID="WizardStep2" runat="server" title="Order Details">
                    treasr t
                </asp:WizardStep>
                <asp:WizardStep ID="WizardStep3" runat="server" Title="Payments">
                </asp:WizardStep>
            </WizardSteps>
        </asp:Wizard>
        

    </asp:Content>

    Friday, July 22, 2011 8:20 AM
  • User531389912 posted

    Hello friends,

    I solve that problem. if you want to bind and show repeater control in accordion so, you have to bind repeater control in accordion load event

    protected void Accordion1_Load(object sender, EventArgs e)
    {
    DataSet ds = new DataSet();
    string SFID = Convert.ToString(Request.QueryString["Id"]);
    SqlDataAdapter daRailway = new SqlDataAdapter("SELECT Rail_Station_Name, Rail_Station_Distance , Dist_Name , Dist_Distance , SubDist_Name , SubDist , City_Name , City_Distance , SF_ID FROM SF_Rail_Station_Master WHERE SF_ID ='" + SFID + "' ", con);
    con.Open();
    daRailway.SelectCommand.ExecuteNonQuery();
    daRailway.Fill(ds, "SF_Rail_Station_Master");
    rptrRailway1.DataSource = ds.Tables["SF_Rail_Station_Master"];
    rptrRailway1.DataBind();
    }

    if this answer is helpful for you please give me reply

    Friday, July 11, 2014 1:06 AM