In my current webforms application, I am generating a datagrid using a single template column to bind all of the data in each row.
My goal is to utilize the bootstrap accordion panel to show just the order name in the accordion heading and then expand the details of the order in the accordion body.
The issue I'm encountering is that since I'm using C# code to bind the data, every row generated has the same div id. This results in the collapse command collapsing only the first row. Switching it to collapse a class collapses every row in the grid. Is there a way to collapse only the divs in the accordion group where the control resides instead of collapsing by id or class?
Below is the code I have, any assistance would be welcomed:
asp:DataGrid ID="DataGrid_Quotes" CssClass="dataGrid" AutoGenerateColumns="false" runat="server" OnItemDataBound="DataGrid_Quotes_OnItemDataBound">
<HeaderStyle CssClass="dataGridHeader"></HeaderStyle>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<div class="dataRowItem">
<div class="accordion-group">
<div class="accodrion-heading">
<div class="dataGridMainItem">
<div class="container-fluid">
<div class="col-sm-6">
<asp:HyperLink runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("Sale","QuoteDetails.aspx?SaleId={0}") %>' />
</div>
<div class="col-sm-6" align="right">
<asp:Label runat="server" Text='<%# Eval("Quote") %>' />
<a class="accordion-toggle" href="#collapseOne" data-toggle="collapse">
<span class="glyphicon glyphicon-chevron-down"></span></a>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="accordian-body in collapse">
<div class="accordion-inner">
<div class="container-fluid">
<div class="row">
<div class="dataGridItemBody">
<div class="col-sm-6">
Client: <asp:Label runat="server" Text='<%# Eval("Client") %>' />
<br />
Total: <asp:Label runat="server" Text='<%# String.Format(Eval(("Total"), "{0:c}")) %>' />
<br />
</div>
<div class="col-sm-6" align="right">
Created On: <asp:Label runat="server" Text='<%# Convert.ToDateTime(Eval("Created On")).ToString("d") %>' />
<br />
</div>
</div>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>