CODEWITHSUNDEEP
c#asp.netvb.net
user1150440
user1150440

Reputation: 449

accordion with listview

I am using a listview to populate a table with 1000 rows. The DB table is about questions and answers.

I want to use accordion control with listview. Should i put the accordion control inside listview itemtemplate?

What i want is clicking on the 1st question opens the 1st answer and clicking on the 2nd question closes the 1st answer and opens the 2nd answer.

UPDATE:

I am trying it this way 

<asp:ListView ID="lvQuestions" runat="server"
    DataKeyNames="QueryID" 
        DataSourceID="SqlDataSourceQueries">
    <LayoutTemplate>

        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />

    </LayoutTemplate>
    <ItemTemplate>
    <div id="products">
       <h3><a href="#"><asp:Label ID="Label1" runat="server" Text='<%# Eval("Query") %>' ></asp:Label></a></h3>
         <div><asp:Label ID="ReplyLabel" runat="server" Text='<%# Eval("Reply") %>'></asp:Label></div>
   </div>
    </ItemTemplate>
</asp:ListView>

But its not working.

Upvotes: 2

Views: 2200

Answers (2)

citronas
citronas

Reputation: 19365

You could use Jquery Accordion

Like in the documentation you would render your rows into the following structure:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

Your ListView could look like this:

<asp:ListView ID="lvQuestions" runat="server"
    onitemdatabound="lvQuestions_ItemDataBound">
    <LayoutTemplate>
       <div id="accordion">
        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
       </div>
    </LayoutTemplate>
    <ItemTemplate>
       <h3><a href="#"><asp:Literal ID="litQuestion" runat="server" /></a></h3>
         <div><asp:Literal ID="litAnswer" runat="server" /></div>
    </ItemTemplate>
</asp:ListView>

Codebehind (sorry it's in C#, but you should be able to translate)

protected void lvQuestions_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        Literal litQuestion = (Literal)e.Item.FindControl("litQuestion");
        Literal litAnswer = (Literal)e.Item.FindControl("litAnswer");


        YourClass item = e.Item.DataItem as YourClass;
        litQuestion.Text = item.Question;
        litAnswer.Text = item.Answer;
     }
 }

Using the ItemDataBound-Event might look as unneccesary overhead to some guys, but depending on your situation, you might want to have more control about the text being rendered depending on the values in your custom class.

Upvotes: 3

Bram W.
Bram W.

Reputation: 1607

I haven't tried it out, but I would suggest using the accordion inside the template of your listview. Then you can use the accordionitem inside the itemtemplate. That would give something like:

<ListView>
  <ListView.Template>
    <ControlTemplate TargetType="ListView">
      <Accordion IsItemsHost="True"/>
    </ControlTemplate>
  </ListView.Template>
  <ListView.ItemTemplate>
    <DataTemplate>
      <AccordionItem .../>
    </ControlTemplate>
  </ListView.ItemTemplate>
</ListView>

Upvotes: 0

Related Questions