Data Binding in an AccordionPane in a Repeater

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Data Binding in an AccordionPane in a Repeater

Previous Next

Data Binding in an AccordionPane in a Repeater

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

Sort Posts:

Re: Data Binding in an AccordionPane in a Repeater

09-08-2006, 3:48 AM

Contact

Loading...
teclioness
Joined on 01-22-2003, 6:50 AM
UK
Posts 31

Hi Tony_c,

Thanks for your help. I would try this out.

Cheers

Re: Data Binding in an AccordionPane in a Repeater

09-13-2006, 9:48 AM

Contact

Loading...
tsantos
Joined on 06-17-2005, 10:31 PM
Toronto, Canada
Posts 54

Hello everyone,

Im having this problem for about two days now.
I'm trying to do exactly the same as you guys.

My aspx goes as follows:

<%@ Page Language="C#" MasterPageFile="~/Auslesesoldaten.master" AutoEventWireup="true" CodeFile="Teste.aspx.cs" Inherits="Paginas_Teste" Title="Test - Members List" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <strong><span style="font-size: 24pt; color: #ffffff; font-family: Arial">Members</span></strong>
    <atlasToolkit:AccordionExtender ID="AccordionExtender1" runat="server">
        <atlasToolkit:AccordionProperties
            TargetControlID="PanelAccordion"
            AutoSize="None"
            SelectedIndex="0"
            FadeTransitions="True"
            TransitionDuration="400"
            FramesPerSecond="40"/>
    </atlasToolkit:AccordionExtender>
    <div id="PanelAccordion" runat="server">
    <asp:Repeater ID="rMyRepeater" runat="server">
        <ItemTemplate>
            <span id="<%# Eval("Id") %>" >
                <div id="AccordionPaneHeader" class="accordionHeader" >
                    <div><%# Eval("Nick") %></div>
                </div>
                    <div id="AccordionPaneContent" class="accordionContent">
                        <div>
                            <table style="width: 530px">
                                <tr>
                                    <td rowspan="2">
                                        <asp:Image ID="imgPhoto" ImageUrl="/Tests/Images/NoPic.gif" runat="server" /></td>
                                    <td>
                                        Name</td>
                                    <td>
                                        <%# Eval("Name")%></td>
                                </tr>
                                <tr>
                                    <td>
                                        Age</td>
                                    <td>
                                    <%# Eval("Age")%></td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href=""><asp:Image ID="imgProfile" AlternateText="View User Profile" ImageUrl="/Tests/Images/profile.gif.gif" runat="server" /></a></td>
                                   <td>
                                        Town</td>
                                    <td>
                                        <%# Eval("Town")%></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </span>
            </ItemTemplate>
        </asp:Repeater>
    </div>
</asp:Content>

To bind it, im doing as follows:

public partial class Paginas_Teste : System.Web.UI.Page
{

    private string cnnString = ConfigurationManager.ConnectionStrings["ConnectionSQLEx"].ConnectionString;

    protected void Page_Load(object sender, EventArgs e)
    {
        this.rMyRepeater.DataSource = this.MembersList();
        this.rMyRepeater.DataBind();
    }

    private List<Member> MembersList()
    {
        SqlConnection conn = null;
        SqlCommand cmd = null;
        SqlDataReader reader = null;
        List<Member> list = null;
        string sql = "SELECT Id, Nick, Name, Town, Birth FROM Users";
        try
        {
            list = new List<Member>();
            conn = new SqlConnection(this.cnnString);
            conn.Open();
            cmd = new SqlCommand(sql, conn);
            reader = cmd.ExecuteReader();
            while (reader.Read())
            {
                Member member = new Member();
                member.Id = reader["Id"].ToString();
                member.Nick = reader["Nick"].ToString();
                member.Name = reader["Name"].ToString();
                member.Town = reader["Town"].ToString();
                DateTime d = Convert.ToDateTime(reader["Birth"]);
                member.Age = Convert.ToString((DateTime.Today.Year) - d.Year);
                list.Add(member);
            }
            return list;
        }
        catch
        {
            return null;
        }
        finally
        {
            if (conn.State == ConnectionState.Open)
            {
                conn.Close();
            }
        }
    }
}

That's alright when I build it. No errors at all.
But when I run it, the accordion renderizes and suddenly disappears(I can see its binding ok by debugging tho). It stays less than one second on the webform (if i right-click and look on the html source, the accordion is there tho =/ ). If I resize the browser window by double-clicking the window title bar, it appears, but totally screwed up. It's like the whole control is to appear in a 200px height div (I already tryed to set a class property to the div like: class="height:100%" and nothing happent), so when I click some pane, it moves in a not usual way to this area, and the other panes doesn't apper anymore(however I can access them with Tab key). Plus, if I don't click any, the not selected panes show the header and half of the content, which is definitly not what I want.

for(int i=0;i > 1;i--)
{
std::cout << "Hello\n";
}

Re: Data Binding in an AccordionPane in a Repeater

09-13-2006, 1:45 PM

Contact

Loading...
tsantos
Joined on 06-17-2005, 10:31 PM
Toronto, Canada
Posts 54

Is anybody else with this problem?
has anybody managed to bind an accordion control with a Repeater / DataList or any other way??
I really need some guidance.

It would be awesome if some one could help me out. Huh?

for(int i=0;i > 1;i--)
{
std::cout << "Hello\n";
}

Re: Data Binding in an AccordionPane in a Repeater

09-13-2006, 5:22 PM

Contact

Loading...
Meme
Joined on 09-13-2006, 9:05 PM
UK
Posts 9

Hi all,

Im having the same problem.

Have looked at the previous posts, and tried various different things.

I'm sure its something really simple here. Although my data is being bound fine, all accordion functionality is disappearing.
I just can't seem to get them both working at the same time?

Sorry new to .net !

Here is my aspx:-

<div id="Accordian1" runat="server" style='width: 460px; height: auto;'>
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
            <ItemTemplate>
                <div class="accordionHeader" runat="server">
                    <a href="" onclick="return false;">My header comes from:
                        <%# Eval("artistName")%>
                    </a>
                </div>
                <div class="accordionContent" runat="server">
                    My contents come from:
                    <%# Eval("artistDescription") %>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <AtlasCT:AccordionExtender ID="AccordionExtender1" runat="server">
        <AtlasCT:AccordionProperties TargetControlID="Accordian1" SelectedIndex="0" FadeTransitions="true"
            FramesPerSecond="40" TransitionDuration="200" AutoSize="None" />
    </AtlasCT:AccordionExtender>

Any help at all would be hugely appreciated.

Thanks --- Meme

Re: Data Binding in an AccordionPane in a Repeater

09-13-2006, 5:43 PM

Contact

Loading...
Dave Sussman
Joined on 06-17-2002, 11:53 AM
UK
Posts 1,176

I gave up on trying to use the binding and just added the data in code:

foreach (News newsItem in News.GetTop())
{
AccordionPane pane = new AccordionPane();

    HtmlAnchor headerLink = new HtmlAnchor();
    headerLink.HRef = "";
    headerLink.Attributes.Add("onclick", "return false;");
    headerLink.Attributes.Add("class", "accordionLink");
    headerLink.InnerText = newsItem.Title;

pane.HeaderContainer.Controls.Add(headerLink);

    HtmlGenericControl content = new HtmlGenericControl();
    content.Attributes.Add("class", "accordianContent");
    content.InnerText = newsItem.NewsContent;

pane.ContentContainer.Controls.Add(content);

newsAccordian.Controls.Add(pane);
}

I think given time this is bound to be fixed, but I couldn't wait.

Dave

Re: Data Binding in an AccordionPane in a Repeater

09-13-2006, 5:56 PM

Contact

Loading...
Meme
Joined on 09-13-2006, 9:05 PM
UK
Posts 9

Hi,

dont anyone waste any time on this pls, i solved it thanks to Ted's post in another thread http://forums.asp.net/thread/1333093.aspx

it was all about the heirarchy of divs and spans, so that this works Great :-

<div id="Accordian1" runat="server" style='width: 460px; height: auto;'>
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
            <ItemTemplate>
>>>>>>     <span id="AccordionPane1">
                    <div class="accordionHeader" runat="server">
>>>>>>>        <div>
                            <a href="" onclick="return false;">My header comes from:
                                <%# Eval("artistName")%>
                            </a>
>>>>>              </div>
                    </div>
                    <div class="accordionContent" runat="server">
                        <div>
                            My contents come from:
                            <%# Eval("artistDescription") %>
                        </div>
                    </div>
                </span>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <AtlasCT:AccordionExtender ID="AccordionExtender1" runat="server">
        <AtlasCT:AccordionProperties TargetControlID="Accordian1" SelectedIndex="0" FadeTransitions="true"
            FramesPerSecond="40" TransitionDuration="200" AutoSize="None" />
    </AtlasCT:AccordionExtender>

I have higlighted a couple of the extra tags for anyone else having the same problem.

thanks to Ted Glaza

Re: Data Binding in an AccordionPane in a Repeater

09-13-2006, 6:02 PM

Contact

Loading...
tsantos
Joined on 06-17-2005, 10:31 PM
Toronto, Canada
Posts 54

I tryed to add on code behind almost like this before, however, my code wasn't working properly coz I was trying to insert (what I though to be) an implementation of ITemplate (actually.. I guess I was passing a wrong object) directly to HeaderContainer/ContentContainer instead passing HtmlnAchor and HtmlGenericControl... well.. I'm gonna try this asap.. i Hope it works properly.. apparently it does..

Dave, thanks in advance..

for(int i=0;i > 1;i--)
{
std::cout << "Hello\n";
}

Re: Data Binding in an AccordionPane in a Repeater

09-14-2006, 7:44 AM

Contact

Loading...
tsantos
Joined on 06-17-2005, 10:31 PM
Toronto, Canada
Posts 54

Once again. Thanks Dave.
It works really fine now..

for(int i=0;i > 1;i--)
{
std::cout << "Hello\n";
}

Re: Data Binding in an AccordionPane in a Repeater

09-18-2006, 9:24 PM

Contact

Loading...
Ted Glaza [MSFT]
Joined on 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi everyone,

In the latest release (60904 on 9/15) we added databinding support for Accordion through its HeaderTemplate and ContentTemplate properties. Hopefully this eases a lot of your frustrations.

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Re: Data Binding in an AccordionPane in a Repeater

10-29-2006, 3:45 PM

Contact

Loading...
Cglubish
Joined on 09-21-2006, 9:46 PM
Posts 6

Hi,

I have been using the AccordionExtender to manually contruct my accordion. It was working fine for months, but I just installed the Beta1 updrade, then updated my web.config etc as outlined in the "Migration Instructions"

Now my accordion doesn't work. Seems like it doesn't like the AccordionProperties tag? I get the following error msg

Type 'AjaxControlToolkit.AccordionExtender' does not have a public property named 'AccordionProperties'.

Has the new Beta1 upgrade changed how manually accessing the AccordionExtender works?

MY CODE:

   <ajaxToolkit:AccordionExtender ID="AccordionExtender1" runat="server">
   <ajaxToolkit:AccordionProperties
           TargetControlID="Accordion1"
           AutoSize="None"
           SelectedIndex="-1"
           FadeTransitions="true"
           TransitionDuration="150"
        FramesPerSecond="30"
           />
   </ajaxToolkit:AccordionExtender>

Re: Data Binding in an AccordionPane in a Repeater

10-29-2006, 4:31 PM

Contact