ASP.NET AJAX Control Toolkit

Re: Data Binding in an AccordionPane in a Repeater

archu136 — Wed, 20 Feb 2008 12:18:51 GMT

Hi frds

I have used Panel instead of accordion pane in datalist,where the data is displayed from the db. Its working fine .The functionality is same as accordionPane.

this is the design code

<asp:DataList ID="dlNews" runat="Server" DataKeyField="NewsID">
            <ItemTemplate>
                <table>
                <tr>
                <td width="500px" style="background-color: #FFCACA;">
                <asp:Panel ID="description_HeaderPanel" runat="server" style="cursor: pointer;" >
                    <div class="heading">
                       <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand" />
                       <font style="font-family:Arial, Helvetica, sans-serif; font-size:12px"> <b><%# Eval("HeadLine")%></b></font>
                    </div>
                </asp:Panel>
                </td>
                </tr>
                <tr>
                <td>
                <asp:Panel id="description_ContentPanel" runat="server" style="overflow:hidden;">
                <p>
                    <%#Eval("NewsContent")%>
                </p>
                </asp:Panel>
                <ajaxToolkit:CollapsiblePanelExtender ID="cpeDescription" runat="Server"
                    TargetControlID="description_ContentPanel"
                    ExpandControlID="description_HeaderPanel"
                    CollapseControlID="description_HeaderPanel"
                     Collapsed="true" SuppressPostBack="true"
                    ImageControlID="description_ToggleImage"
                    CollapsedImage="images/collapse.jpg" ExpandedImage="images/expand.jpg"
                    />
                </td>
                </tr>
                </table>
            </ItemTemplate>
            </asp:DataList>

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

in code behind

In pageload

           If Not IsPostBack Then
                Dim objNews As New clsNews
                Dim dsNews As DataSet = objNews.GetNews
               If dsNews.Tables(0).Rows.Count > 0 Then

                   dlNews.DataSource = dsNews
                    dlNews.DataBind()
                End If
           End If

Hope this will be helpful.

Thanks and Regards

Archu

Re: Data Binding in an AccordionPane in a Repeater

archu136 — Wed, 06 Feb 2008 12:19:59 GMT

Hi Frds

Even i'm facing the same problem

how can i achieve this using ajaxcontroltoolkit

as i'm using ajaxcontroltoolkit

plz help me its very urgent

thanks and regards

Archu

Re: Data Binding in an AccordionPane in a Repeater

delegatevoid — Fri, 16 Nov 2007 23:40:02 GMT

Hey, might be missing the point here, but for data binding you do not need a repeater: Update: can't seem to post the code for some reason, but do this. Create a new data source asp:ObjectDataSource for example. Set the DataSourceID of the accordion to that and use the HeaderTemplate and ContentTemplate tags inside of it.

Re: Data Binding in an AccordionPane in a Repeater

Cglubish — Sun, 29 Oct 2006 21:56:39 GMT

Sorry for so many posts in a row....... As my previous post points out I've realized the problem with the Properties. But I can't get my accordion to work at all anymore. I get an error saying that AccordionExtender cannot extend generic HTML elements. I'm manually building my accordion by using a <div> as the targetcontrolID. This worked until I upgraded... Ideas? Do I have to redo how I'm doing this based on the beta upgrade?

Re: Data Binding in an AccordionPane in a Repeater

Cglubish — Sun, 29 Oct 2006 20:31:35 GMT

Forget it.... In case anyone else has this problem, read this, it explains how Properties are handled now.

http://ajax.asp.net/ajaxtoolkit/Walkthrough/AtlasToAspNetAjax.aspx

Re: Data Binding in an AccordionPane in a Repeater

Cglubish — Sun, 29 Oct 2006 19:45:49 GMT

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

Ted Glaza [MSFT] — Tue, 19 Sep 2006 01:24:58 GMT

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

Re: Data Binding in an AccordionPane in a Repeater

tsantos — Thu, 14 Sep 2006 11:44:25 GMT

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

Re: Data Binding in an AccordionPane in a Repeater

tsantos — Wed, 13 Sep 2006 22:02:59 GMT

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..

Re: Data Binding in an AccordionPane in a Repeater

Meme — Wed, 13 Sep 2006 21:56:35 GMT

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

Dave Sussman — Wed, 13 Sep 2006 21:43:39 GMT

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

Meme — Wed, 13 Sep 2006 21:22:46 GMT

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

tsantos — Wed, 13 Sep 2006 17:45:59 GMT

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.

Re: Data Binding in an AccordionPane in a Repeater

tsantos — Wed, 13 Sep 2006 13:48:03 GMT

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.

Re: Data Binding in an AccordionPane in a Repeater

teclioness — Fri, 08 Sep 2006 07:48:24 GMT

Hi Tony_c,

Thanks for your help. I would try this out.

Cheers