Data Binding in an AccordionPane in a Repeater

Last post 02-20-2008 7:18 AM by archu136. 29 replies.

Sort Posts:

  • Data Binding in an AccordionPane in a Repeater

    07-20-2006, 11:57 PM
    • Member
      25 point Member
    • mwadden
    • Member since 07-19-2006, 7:01 PM
    • Posts 5
    I really hope someone can help me with this... I need this for a client project asap.  My goal is to create an Accordion using data from a database.

    I've set up a Repeater that generates each AccordionPane for my Atlas Accordion.  Within the Repeater's ItemTemplate, data-binding works just fine.  However, it stops working inside the AccordionPane definition.

    Here's some code that illustrates the problem.  I've placed comments inline to show the problem areas.

    (sample.aspx):

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="sample.aspx.cs" Inherits="sample" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>

    <atlas:ScriptManager id="MasterScriptManager" EnablePartialRendering="true" runat="Server" EnableScriptComponents="True" EnableScriptGlobalization="false">
    </atlas:ScriptManager>

    </head>
    <body>
    <form id="form1" runat="server">
    <div style="width: 50%;">

    <atlasToolkit:Accordion ID="myAccordion" runat="server" SelectedIndex="0" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None">

    <asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
    <%-- PUTTING THIS LABEL HERE BINDS PROPERLY
    <asp:Label text='<%# DataBinder.Eval(Container.DataItem, "firstName")%>' runat="server"></asp:Label>
    <br />
    --%>
    <atlasToolkit:AccordionPane runat="server">
    <Header>
    <div style="background-color: #ccc; border: 1px solid black">
    First Name:
    <%-- UNCOMMENTING THIS LABEL CAUSES ERROR --%> <asp:Label Text='<%--# DataBinder.Eval(Container.DataItem, "firstName")--%>' runat="server"></asp:Label>
    </div>
    </Header>
    <Content>
    <div style="background-color: #00cccc;">
    The Accordion is a web control that allows you to provide multiple panes and display
    them one at a time.<br /><br />
    </div>
    </Content>
    </atlasToolkit:AccordionPane>

    </ItemTemplate>
    </asp:Repeater>

    </atlasToolkit:Accordion>


    </div>
    </form>
    </body>
    </html>
     
    And the code-behind which just binds some sample data to the Repeater (sample.aspx.cs):
     
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;

    public partial class sample : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    DataSet dSet = new DataSet();
    DataTable dTable = new DataTable("People");
    DataRow dRow;

    dTable.Columns.Add("firstName", Type.GetType("System.String"));
    dTable.Columns.Add("lastName", Type.GetType("System.String"));

    dRow = dTable.NewRow();
    dRow["firstName"] = "John";
    dRow["lastName"] = "Doe";
    dTable.Rows.Add(dRow);

    dRow = dTable.NewRow();
    dRow["firstName"] = "Bob";
    dRow["lastName"] = "Smith";
    dTable.Rows.Add(dRow);

    dSet.Tables.Add(dTable);

    myRepeater.DataSource = dSet.Tables["People"];
    myRepeater.DataBind();
    }
    }
     
    As I said, my goal is to create an Accordion where each AccordionPane's Header and Content areas contain various controls that display database info.  For example, it's important that I can place a LinkButton in each Header who's ID (or CommandArgument) is set from a field in the database.  The LinkButtons will trigger a call to update a UpdatePanel as well as some other javascript code.

    Thanks,

    -mark
  • Re: Data Binding in an AccordionPane in a Repeater

    07-21-2006, 11:01 AM
    • Contributor
      6,620 point Contributor
    • paul.vencill
    • Member since 02-01-2006, 12:57 PM
    • Gaithersburg, MD
    • Posts 1,350
    I haven't played with accordions yet, but I'm wondering if you're not nesting Containers there, so when the label inside the Accordion calls Container, it's not calling the Repeater, it's calling the Accordion?  Just a thought, I don't have time right now to try and test it for you (sorry).
    Help those who have helped you... remember to "Mark as Answered"
  • Re: Data Binding in an AccordionPane in a Repeater

    07-21-2006, 11:04 AM
    • Contributor
      6,620 point Contributor
    • paul.vencill
    • Member since 02-01-2006, 12:57 PM
    • Gaithersburg, MD
    • Posts 1,350
    In case I'm right, I found an article here: http://www.velocityreviews.com/forums/t111234-nested-repeaters-accessing-data-from-outer-repeater.html that talks to nested repeaters that might help in your case...
    Help those who have helped you... remember to "Mark as Answered"
  • Re: Data Binding in an AccordionPane in a Repeater

    07-21-2006, 12:19 PM
    • Member
      25 point Member
    • mwadden
    • Member since 07-19-2006, 7:01 PM
    • Posts 5
    Thanks, I'll take a look.
  • Re: Data Binding in an AccordionPane in a Repeater

    07-27-2006, 11:01 AM

    Did you get this working? No matter what combination of Parent.Parent/etc I use, I don't get the content rendered.

    dave

  • Re: Data Binding in an AccordionPane in a Repeater

    08-08-2006, 3:19 AM
    • Member
      20 point Member
    • ahtsong
    • Member since 07-22-2006, 9:30 AM
    • Posts 4

    Hi,

    I'm also facing the same problem, hope that someone could share.

     

  • Re: Data Binding in an AccordionPane in a Repeater

    08-11-2006, 1:51 AM
    • Member
      57 point Member
    • WAJAN
    • Member since 08-06-2006, 11:55 PM
    • Posts 12
    Anyone had good luck with Repeater & Accordion? I having the same problem... I also tried with FormView but failed :(
  • Re: Data Binding in an AccordionPane in a Repeater

    08-11-2006, 10:25 AM
    • Member
      10 point Member
    • kiteduncan
    • Member since 08-11-2006, 1:40 PM
    • Posts 2

    I managed to get this to work:

     

    1    <div id="Accordion1" runat="server">
    2    	<asp:Repeater ID="rMyRepeater" runat="server">
    3    	<ItemTemplate>
    4    	<span id="Accordion1Pane"> 
    5    		<div id="Accordion1PaneHeader">
    6    			<div><a href="" onclick="return false;"><%# Eval("DataItem") %></a></div>
    7    		</div>
    8    		<div id="Accordion1PaneContent">
    9    			<div><%# Eval("DataItem") %></div>
    10   		</div>
    11   	</span>
    12   	</ItemTemplate>
    13   	</asp:Repeater>
    14   </div>
    15   
    16   <atlasControlToolkit:AccordionExtender ID="AccordionExtender1" runat="server">
    17   	<atlasControlToolkit:AccordionProperties
    18   		TargetControlID="Accordion1"
    19   		AutoSize="None"
    20   		SelectedIndex="0"
    21   		FadeTransitions="true" /> 
    22   </atlasControlToolkit:AccordionExtender>
    

    Rather than use the Accordion and AccordionPane controls, it seems that if you manually construct the "accordion" as above, and then follow this with the AccordionExtender control, it all gets rendered correctly, and works as a data-driven Accordion should Wink.

    Points to note:

    • The outer div must have runat="server" included, and also provides the ID for the AccordionProperties.
    • Individual panes are indicated by a <span>, and the construction above must be followed.
    • Note the additional <div> around both the pane header and content - it does not work without them!

    Hope this helps.

  • Re: Data Binding in an AccordionPane in a Repeater

    08-11-2006, 12:42 PM
    • Member
      57 point Member
    • WAJAN
    • Member since 08-06-2006, 11:55 PM
    • Posts 12
    thanks very much kiteduncan, you have a heart of gold :) it worked!!!
  • Re: Data Binding in an AccordionPane in a Repeater

    08-11-2006, 1:59 PM
    • Member
      57 point Member
    • WAJAN
    • Member since 08-06-2006, 11:55 PM
    • Posts 12
    yes, it works on IE, but not on Firefox. On IE I it could not extend its height... :(
  • Re: Data Binding in an AccordionPane in a Repeater

    08-11-2006, 8:32 PM
    • Member
      57 point Member
    • WAJAN
    • Member since 08-06-2006, 11:55 PM
    • Posts 12

    finally, I managed to make it work on both IE and Firefox. Here goes the code:

    ======================

        <div id="Accordion1" runat="server" style="width: 460px; height:auto;">
                                        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                                         <ItemTemplate>
                                                <span id="<%# Eval("Uyghur") %>"><div>
                                                <div class="accordionHeader">
                                      My header comes from: <%# Eval("DataItemName") %></a>
                                             </div></div><div><div class="accordionContent">
                                                        My contects come from: <%# Eval("DataItemName") %>
                                             </div>
                                         </div></span>
                                          </ItemTemplate>
                                            </asp:Repeater>
                                    </div>
                                    <atlasToolkit:AccordionExtender ID="AccordionExtender1" runat="server">
                                             <atlasToolkit:AccordionProperties
                                              TargetControlID="Accordion1"
                                              AutoSize="none"
                                                 SelectedIndex="0"
                                              FadeTransitions="true"
                                                    TransitionDuration="250"
                                                    FramesPerSecond="40"/>
                                    </atlasToolkit:AccordionExtender>

    ======================

    N.B.: DO NOT put a space between <span> and <div> tags, if not it does not work properly in Firefox... That is what I found, don't ask me why. Yes, it is strange, I am still looking for an answer... :)

  • Re: Data Binding in an AccordionPane in a Repeater

    08-12-2006, 3:59 AM
    • Member
      10 point Member
    • kiteduncan
    • Member since 08-11-2006, 1:40 PM
    • Posts 2
    Thanks WAJAN, that's a good call......
  • Re: Data Binding in an AccordionPane in a Repeater

    08-14-2006, 3:57 AM
    • Member
      142 point Member
    • teclioness
    • Member since 01-22-2003, 6:50 AM
    • UK
    • Posts 31
    Thanks Wajan, I would try this solution.

    Great work!!
  • Re: Data Binding in an AccordionPane in a Repeater

    08-14-2006, 4:28 AM
    • Member
      142 point Member
    • teclioness
    • Member since 01-22-2003, 6:50 AM
    • UK
    • Posts 31
    I tried this for my scenario. Even though the data gets bound, but no accordion behaviour can be seen. Here is my code: 
    1    <atlas:UpdatePanel ID="UpdatePanel2" runat="server">
    2            <ContentTemplate>
    3                <div id="Accordion1" runat="server">
    4                    <asp:GridView ID="GridView2" runat="server" AllowPaging="True" AutoGenerateColumns="False">
    5                        <Columns>
    6                            <asp:TemplateField>
    7                                <ItemTemplate>
    8                                    <span id="<%# Eval("sAMAccountName") %>"><div>
    9                                            <div class="accordionHeader">
    10                                               My header comes from:
    11                                               <div><a href="" onclick="return false;"><%# Eval("givenName") %>
    12                                               </a></div>
    13                                           </div>
    14                                       </div>
    15                                       <div>
    16                                           <div class="accordionContent">
    17                                               My contects come from:
    18                                               <%# Eval("company") %>
    19                                           </div>
    20                                       </div>
    21                                   </span>
    22                               </ItemTemplate>
    23                           </asp:TemplateField>
    24                       </Columns>
    25                   </asp:GridView>
    26               </div>
    27               <cc1:AccordionExtender ID="AccordionExtender1" runat="server">
    28                   <cc1:AccordionProperties TargetControlID="Accordion1" AutoSize="none" SelectedIndex="0"
    29                       FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40" />
    30               </cc1:AccordionExtender>
    31           </ContentTemplate>
    32           </atlas:UpdatePanel>
    
     What is it that I am doing wrong? Thanks for your help
  • Re: Data Binding in an AccordionPane in a Repeater

    09-07-2006, 9:54 PM
    • Member
      25 point Member
    • tony_c
    • Member since 08-08-2006, 4:25 AM
    • Posts 6

    hey teclioness..

    i m doing something pretty much exactly the same as you..
    my guess is you want an updatepanel to surround your accordion such that on update.. the accordion has the new data...

    my suggestion...
    get rid of your gridview... 'cause i dont think thats necessary.. unless you really want it...
    use a repeater instead...
    under your update panel... add the trigger... add a panel that will surround your repeater...
    and let that panel be the TargetControlID for your accordionextender...
    move your div tag for the accordionHeader div... follow the hierachy from the threads before...

    hope its not too complicated...

Page 1 of 2 (30 items) 1 2 Next >