StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Since you don't provide your actual code, I put together an example on how to accomplish what you need based off of <a href="https://stackoverflow.com/questions/7725173/displaying-records-grouped-by-month-and-year-in-asp-net">this other question</a>.</p> <p>That other question simply takes the files on the server's drive C and groups them by creation time in descending order in a grid. So here's the repeater markup:</p> <pre><code><asp:HiddenField ID="dataGroups" runat="server" /> <asp:Repeater ID="rpt" runat="server" OnItemDataBound="rpt_RowDataBound" > <ItemTemplate>  <table id="tableItem" runat="server"> <tr> <td style="width: 200px;"> <asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'></asp:Label> </td> <td style="width: 200px;"> <asp:Label ID="lblDirName" runat="server" Text='<%#Eval("DirectoryName") %>'></asp:Label> </td> <td style="width: 200px;"> <asp:Label ID="lblCreationTime" runat="server" Text='<%#Eval("CreationTime") %>'></asp:Label> </td> <td style="50px"> <asp:Button ID="btnAction" runat="server" Text="Hit me" OnClick="btnAction_Click"/> </td> </tr> </table> </ItemTemplate> </asp:Repeater> </code></pre> <p>Here's the code behind for the <code>OnRowDataBound</code> event; written in C# since that's what you use:</p> <pre><code>private int month = -1; private int year = -1; protected void rpt_RowDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { //Binding to FileInfo objects. //Since we are grouping by CreationTime we need to check if it's time to create a new "group" //Is current month and year different from the value previously stored on the month and year variables? if (month != (e.Item.DataItem as FileInfo).CreationTime.Month || year != (e.Item.DataItem as FileInfo).CreationTime.Year) { month = (e.Item.DataItem as FileInfo).CreationTime.Month; year = (e.Item.DataItem as FileInfo).CreationTime.Year; //append the current group to the hidden variable "dataGroups" which will tell us quickly how many groups we have in total dataGroups.Value += (e.Item.DataItem as FileInfo).CreationTime.ToString("yyyMM") + ","; } //for every row; "stamp it" with this attribute since we'll use it on the client side with jQuery (e.Item.FindControl("tableItem") as HtmlTable).Attributes.Add("data-group", (e.Item.DataItem as FileInfo).CreationTime.ToString("yyyMM")); } } </code></pre> <p>Now on the client-side; we need to do some jQuery magic in order to build the collapsible panels.</p> <pre><code><link href="css/flick/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //asp hidden element containing the list of groups separated by commas. //Check code behind of RowDataBound to see where is this populated var dataGroups = $('#<%=dataGroups.ClientID%>').val().split(','); for (var i = 0; i < dataGroups.length; i++) { //split() doesn't have an option to ignore empty strings so we'll just ignore it if (dataGroups[i] != '') { //select all table elements with the data-group value matching the //current group we are iterating over and enclose them all //inside a div; effectively creating a "group" $('table').filter(function (inputs) { return $(this).data('group') == dataGroups[i]; }).wrapAll("<div class='accordion'>"); } } var accordions = $('.accordion'); //now, for every div enclosing the groups, create a Handle that will work as the element that //collapses or expands the group $(accordions).wrapInner("<div>").prepend('<h3><a href="#">Handle</a></h3>'); //Now replace the word "Handle" above for the actual group number/name or what have you for (var i = 0; i < accordions.length; i++) { $(accordions[i]).find('h3 a').text("Group " + $(accordions[i]).find('table:first').data('group')); } //finally call jQuery.accordion to create the accordions on every group $('.accordion').accordion({ collapsible: true, autoHeight: false }); }); </script> </code></pre> <p>Now, those lines of code produce this:</p> <p><img src="https://i.stack.imgur.com/CLFHw.png" alt="enter image description here"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload