ASP.NET GridView Bootstrap 3 accordion

Question

I have came up on a problem and I am in need of assistance. I create a gridview that specifies the list of available services that a user can click on and add to his cart.

I can't seem to figure out how using bootstrap 3 I can group the list of services to different groups.

The code for the current grid view with no grouping is specified bellow

What I am trying to do is group this data using bootstrap 3 accordion bootstrap 3 accordion

I have never done this before and I don't know how to group a grid to an accordion

Any help would be very much appreciated Screenshot of the grid is specified bellow

<asp:GridView runat="server" ID="GridViewPaslauguSarasas" CssClass="mGrid col-xs-12 col-sm-12 col-md-12 col-lg-12"
    PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" AutoGenerateColumns="False" AllowPaging="false">
    <Columns>
        <asp:TemplateField HeaderText="Paslaugos pavadinimas">
            <ItemTemplate>
                <asp:HiddenField ID="hdn_pasl_ID" Value='<%# DataBinder.Eval(Container, "DataItem.pasl_kodas") %>' runat="server" />
                <asp:Label ID="lbl_pasl_pav" Text='<%# DataBinder.Eval(Container, "DataItem.pasl_pav") %>' runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Paslaugos aprašymas">
            <ItemTemplate>
                <asp:Label ID="lbl_pasl_apras" Text='<%# DataBinder.Eval(Container, "DataItem.pasl_apras") %>' runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Paslaugos kaina, Eur.">
            <ItemTemplate>
                <asp:Label ID="lbl_pasl_kaina" Text='<%# DataBinder.Eval(Container, "DataItem.pasl_kaina") %>' runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Užsakomas kiekis">
            <ItemTemplate>
                <asp:TextBox ID="txt_pasl_kiekis" runat="server" EnableViewState="true" Text='<%# DataBinder.Eval(Container, "DataItem.kiekis") %>'></asp:TextBox>
                <cc1:numericupdownextender id="ajax_pasl_kiekis" runat="server" targetcontrolid="txt_pasl_kiekis" width="100" refvalues="" servicedownmethod="" serviceupmethod="" targetbuttondownid="" targetbuttonupid="" minimum="0" maximum="50" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EmptyDataTemplate>
        <asp:Label ID="lbl_empty_grid" runat="server" Text="Įrašų nerasta" Font-Bold="true"></asp:Label>
    </EmptyDataTemplate>
</asp:GridView>

Answer 1

You cannot use a GridView with an accordion if you want a split in the rows. You will have to create everything with <div> elements as seen in the link you provide. You could use a Repeater for that.

<div class="panel-group" id="accordion">

    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%# Container.ItemIndex %>">Collapsible Group <%# Container.ItemIndex + 1 %></a>
                    </h4>
                </div>
                <div id="collapse<%# Container.ItemIndex %>" class="panel-collapse collapse <%# Container.ItemIndex == 0 ? "in" : "" %>">
                    <div class="panel-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </div>
                </div>
            </div>

        </ItemTemplate>
    </asp:Repeater>

</div>

But if you really want to use GridView, you will have to use multiple

<div class="panel-group" id="accordion">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">

                <asp:GridView ID="GridViewPaslauguSarasas_1" runat="server"></asp:GridView>

            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">

                <asp:GridView ID="GridViewPaslauguSarasas_2" runat="server"></asp:GridView>

            </div>
        </div>
    </div>

</div>