Asp: repeater folding lines - Updated

Question

I am wondering if anyone has a creative solution to my problem. I have a repeater that populates from my database and it looks like this:

<asp:Repeater ID="ResultsTableRepeater" runat="server" OnPreRender="ResultsTableRepeater_PreRender"> <HeaderTemplate> <table class="td-table-bordered" style="font-size: small; width: 90%"> <tr> <th>Change #</th> <th>Change Title</th> <th>Change Description</th> <th>Clarity Id</th> <th>Package Description</th> <th>Package Name</th> <th>Package Status</th> <th>Assigned To</th> <th>New Package</th> </tr> </HeaderTemplate> <ItemTemplate> <asp:Literal runat="server" Text='<%# Eval("ChangeId") %>' ID="IdTag" Visible="false"></asp:Label> <tr id="tableRow" class="" data-changeId='<%# Eval("ChangeId") %>' runat="server" style='<%#(Eval("AssignedTo").ToString() == "7" || Eval("AssignedTo").ToString() == "8")? "": "font-weight:bold; background-color:cornsilk" %>'> <td><%# Eval("ChangeId") %></td> <td><%# Eval("ChangeTitle") %></td> <td><%# Eval("ChangeDescription") %></td> <td><%# Eval("ClarityId") %></td> <td><%# (Eval("PackageId").ToString() == string.Empty) ? "" : "<a href=http://dev.rlaninfrastructure.tdbank.ca/RCIViewForm?ChangeId=" + Eval("ChangeId") + "&PackageId=" + Eval("PackageId") + " runat='server' id='RCILink'>" %> <asp:Label ID="ExistingPackageLabel" runat="server" Text='<%# (Eval("PackageId").ToString() == string.Empty) ? "No packages" : Eval("PackageDescription").ToString() %>'> </asp:Label><%# (Eval("PackageId").ToString() == string.Empty) ? "" : "</a>" %> </td> <td><%# Eval("PackageName") %></td> <td> <asp:Label ID="LabRequestedLabel" runat="server" Text='<%# (Eval("PackageStatus").ToString() == "1") ? "Requested" : (Eval("PackageStatus").ToString() == "2") ? "Built" : (Eval("PackageStatus").ToString() == "3") ? "NFT" : (Eval("PackageStatus").ToString() == "4") ? "Pilot" : (Eval("PackageStatus").ToString() == "5") ? "Production" : (Eval("PackageStatus").ToString() == "6") ? "Completed" : (Eval("PackageStatus").ToString() == "7") ? "Cancelled" : (Eval("PackageStatus").ToString() == "8") ? "Pending" : "" %>'></asp:Label> </td> <td><%# (Eval("EmployeeName").ToString() == string.Empty) ? "" : Eval("EmployeeName")%></td> <td><%# "<a href=http://dev.rlaninfrastructure.tdbank.ca/RCIViewForm?ChangeId=" + Eval("ChangeId") + " runat='server' id='RCILink'>"%> <asp:Label ID="NewPackageLabel" runat="server" Text="Create New"> </asp:Label><%#"</a>" %></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> 

and he creates a table that looks like this:

What I am around is rows with a repeating change identifier, which I would like to collapse by default, but you can click to expand it (and also click again to collapse again).

I started implementing the Jon P solution below, and I'm almost ready! Just a jquery onclick event.

Below is my PreRender method of my code.

 protected void ResultsTableRepeater_PreRender(object sender, EventArgs e) { int previousId = 0; int currentId = 0; int nextId = 0; for (int item = 0; item < ResultsTableRepeater.Items.Count; item++) { Literal idTag = (Literal)ResultsTableRepeater.Items[item].FindControl("IdTag"); Literal classTag = (Literal)ResultsTableRepeater.Items[item].FindControl("ClassTag"); HtmlTableRow tableRow = (HtmlTableRow)ResultsTableRepeater.Items[item].FindControl("tableRow"); if (item != ResultsTableRepeater.Items.Count - 1) int.TryParse(((Literal)ResultsTableRepeater.Items[item + 1].FindControl("IdTag")).Text.ToString(), out nextId); if (int.TryParse(idTag.Text, out currentId)) { if (currentId == previousId) { tableRow.Attributes["class"] = "hidden"; } else if (currentId != previousId && currentId == nextId) { tableRow.Attributes["class"] = "toggler"; } } else nextId = 0; int.TryParse(idTag.Text, out previousId); } } 

Update again: the only thing I left to fix is ​​jquery, which expands and collapses hidden / open lines on toggler lines. Below is jquery and css according to Jon P. help.

 $(".toggler").click(function(){ var idClicked = $(this).data("changeid"); //Toggle hidden on the sibling rows with the same data id $(this).nextAll("[data-changeId='" + idClicked +"']").toggleClass("hidden"); //Toggle opened status on clicked row $(this).toggleClass("opened"); }); .hidden{display:none;} .toggler td:first-child::after{content:" +";} .toggler.opened td:first-child::after{content:" -";} 

Can someone help me in this finale? I feel like I'm around.

Answer 1

You do not have time for a complete answer, since there is an honest bit on the server side, so I will try to give you a big picture.

You need to take a look at adding the class to the table row, maybe add asp:literal to your tr to hold the class. Also add asp:literal for your id, this will give you a control from which you can get the value. Perhaps use this literal for the data attribute in the table row.

Then use the OnPreRender event on your repeater. Repeater elements are repeated here. Compare the identifier that you have stored in the literature mentioned above with the identifier in the previous and next elements. If the id is the same as the previous, add a css class that you can use to hide it. If the identifier differs from the previous one but matches the previous one, add the css class to indicate that the string is used for hiding and anti-aliasing.

Add CSS to hide the lines using the class added above.

You want an HTML code similar to the following. I also added extension and crash using jquery

 $(document).ready(function() { $(".toggler").click(function() { var idClicked = $(this).data("changeid"); //Toggle hidden on the sibling rows with the same data id $(this).nextAll("[data-changeId='" + idClicked + "']").toggleClass("hidden"); //Toggle opened status on clicked row $(this).toggleClass("opened"); }); }); 

 .hidden { display: none; } .toggler td:first-child::after { content: " +"; } .toggler.opened td:first-child::after { content: " -"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table class="td-table-bordered" style="font-size: small; width:90%"> <tr> <th>Change #</th> <th>Change Title</th> <th>Change Description</th> <th>Clarity Id</th> <th>Package Description</th> <th>Package Name</th> <th>Package Status</th> <th>Assigned To</th> <th>New Package</th> </tr> <tr data-changeId="1"> <td>1</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="toggler" data-changeId="2"> <td>2</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="hidden" data-changeId="2"> <td>2</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="hidden" data-changeId="2"> <td>2</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr data-changeId="3"> <td>3</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="toggler" data-changeId="4"> <td>4</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="hidden" data-changeId="4"> <td>4</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> </table> 

NOTE all this can be done on the client side, but you will have a short moment when the table is fully expanded and javascript will develop what to hide. This can be unpleasant for your users.

Answer 2

 Select Distinct from yourtableName 

Use in your query, which may arise due to your query, maybe, or you use a left join with some table, if you use joins, then make this inner join the repeater will repeat what the source will be provided therefore in your the request has some problem (data source)