ASP.NET GridView Bootstrap 3 гармошка - PullRequest
Новая
       28

ASP.NET GridView Bootstrap 3 гармошка

0 голосов
/ 10 октября 2018

У меня возникла проблема, и мне нужна помощь.Я создаю gridview, который определяет список доступных сервисов, которые пользователь может щелкнуть и добавить в свою корзину.

Я не могу понять, как с помощью начальной загрузки 3 я могу сгруппировать список служб по разным группам.

Код для текущего вида сетки без группировки указан ниже

Я пытаюсь сгруппировать эти данные, используя bootstrap 3 accordion bootstrap 3 accordion

Я никогда не делал этого раньше, и я не знаю, как сгруппировать сетку в аккордеон.

Любая помощь будет принята с благодарностью. Скриншот сетки указан ниже

enter image description here

<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>

1 Ответ

0 голосов
/ 10 октября 2018

Вы не можете использовать GridView с аккордеоном, если хотите разделить строки.Вам нужно будет создать все с элементами <div>, как видно по указанной вами ссылке.Вы можете использовать Repeater для этого. 

<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>

Но если вы действительно хотите использовать GridView, вам придется использовать несколько 

<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>
...