Collapse Bootstrap Accordion Group

Question

I am currently generating a datagrid in my webforms application that I am using a single template column to bind all of my data into foreach row.

I am trying to use the bootstrap accordion pane to display only the name of my order in the accordion heading and then expand the details of the order in the accordion body.

The trouble I am facing is since I am using my c# code to bind the data every row that is generated has the same div id so when I execute the collapse command on any of my rows it is always collapsing the first row. If I change it to collapse a class instead of an id it then collapses every row in the grid. Is there a way to collapse only the div's in the accordion group a control resides in instead of collapsing by id or class?

Here is my code below, any help would be appreciated:

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") %>' />&nbsp;&nbsp;
                                        <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:&nbsp;<asp:Label runat="server" Text='<%# Eval("Client") %>' />
                                                <br />
                                                Total:&nbsp;<asp:Label runat="server" Text='<%# String.Format(Eval(("Total"), "{0:c}")) %>' />
                                                <br />
                                            </div>
                                            <div class="col-sm-6" align="right">
                                                Created On:&nbsp;<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>

To be fair, im not familiar with c#, but you basically need to set the href attribute of your accordion as the same id of the current content, right? I can't see why you can't set this 2 things using the ID (or any other identification) of the current content the same way you do with the title and the content instead of using collapseOne. Am i missing something obvious? — Clyff
Since I am using a foreach loop the code is generating the datagrid with multiple rows each containing a div holding my data. The problem is since that div is getting generated by the code the div grid always contains "div id=collapse" which is where the accordion-inner data resides. So instead of toggling the collapse using an id or class I need to toggle the collapse by child div or something similar but I'm not sure how or if that's even possible. — Matt P
If there was something to change the data-target to "child div" or something similar instead of using an id or class to use for the data-target that would solve my problem I'm just not sure how to get there. — Matt P

Matt P Matt P · Accepted Answer · 2015-09-22T18:45:18

I figured it out. I used " class="collapse" then set the data-target="#<%# Eval("Quote") %>" which dynamically assigned the div id to the quote number for that row.

<asp:TemplateColumn>
    <ItemTemplate>
        <div class="dataRowItem">
            <div class="accordion" id="accordion2">
                <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") %>' />&nbsp;&nbsp;
                                    <a class="accordion-toggle" data-toggle="collapse" data-target="#<%# Eval("Quote") %>"><span class="glyphicon glyphicon-chevron-down"></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-inner">
                        <div id="<%# Eval("Quote") %>" class="collapse">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="dataGridItemBody">
                                        <div class="col-sm-6">
                                            Client:&nbsp;<asp:Label runat="server" Text='<%# Eval("Client") %>' />
                                            <br />
                                            Total:&nbsp;<asp:Label runat="server" Text='<%# String.Format(Eval(("Total"), "{0:c}")) %>' />
                                            <br />
                                        </div>
                                        <div class="col-sm-6" align="right">
                                            Created On:&nbsp;<asp:Label runat="server" Text='<%# Convert.ToDateTime(Eval("Created On")).ToString("d") %>' />
                                            <br />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:TemplateColumn>

Collapse Bootstrap Accordion Group

1 Answers