I recently did a nested repeater according to this tutorial. The same thing
http://www.codeproject.com/Articles/6140/A-quick-guide-to-using-nested-repeaters-in-ASP-NET
But I added a jQuery accordion just like this example:
http://www.snyderplace.com/demos/accordion.html
Everything is good, but I realized some UI issues. I mean for example if one of my nested repeaters has 100 records and another has just 1 record, for this second with just 1 record, it has a blank space reserved as it had 100 records also. Someone knows how to fit the height each nested repeater to its elements?
<div id="accordion">
<asp:Repeater ID="summary" runat="server" OnItemDataBound="summary_ItemDataBound">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div>
Id:<asp:Literal ID="litCategory" runat="server" />
</div>
<div>
<asp:Repeater ID="detail" runat="server" OnItemDataBound="detail_ItemDataBound">
<HeaderTemplate>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:Literal ID="litID" runat="server" /></td>
<td><asp:Literal ID="litName" runat="server" /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</div>
I got it! I found this solution!
$(function () {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
});
I need to specify that to attributes and that's it!