locked
Repeater with items side by side RRS feed

  • Question

  • User-909867351 posted

    Hi

    I gave up from listbox because I can't put it to work on bootstrap 4.  (https://forums.asp.net/t/2139750.aspx?ListView+and+Card+Bootstrap)

    I try to use the repeater to achieve the same result but I have no luck because the items from repeater seems to be in row and I can't make colums.

    Why I can't get a grid of two or more columns? It's possible to have a grid with 4 columns with the reapeater using bootstrap?

    Sunday, April 29, 2018 11:01 PM

Answers

  • User283571144 posted

    Hi mariolopes,

    I try to use the repeater to achieve the same result but I have no luck because the items from repeater seems to be in row and I can't make colums.

    Why I can't get a grid of two or more columns? It's possible to have a grid with 4 columns with the reapeater using bootstrap?

    Since you don't provider the details codes about your repeater control, I could only create a test demo according to your previous thread's listview.

    The aspx codes as below:

                     <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                        <ItemTemplate>
                            <div class=" col-lg-3 col-md-3 col-sm-3">
                                <div class="card">
                                    <div class="card-header">
                                        ID: <asp:Label ID="Label2" runat="server" Text='<%#Eval("Id")%>'></asp:Label>
                                    </div>
                                    <div class="card-body">
                                        Name: <asp:Label ID="Label3" runat="server" Text='<%#Eval("Name")%>'></asp:Label>
                                    </div>
                                    <div class="card-footer">
                                        Price: <asp:Label ID="Label1" runat="server" Text='<%#Eval("Price")%>'></asp:Label>
                                   </div>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DataStoreConnectionString %>" SelectCommand="SELECT * FROM [Product]"></asp:SqlDataSource>
    

    The result as below:

     

    Since bootstrap Grid system's 'col-' class need in the row class div, we should add the div with 'row' class outside the repeater.

    More details, you could refer to below codes.

            <div class="row">
                <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <div class="card">
                                <div class="card-header">
                                    ID:
                                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("Id")%>'></asp:Label>
                                </div>
                                <div class="card-body">
                                    Name:
                                    <asp:Label ID="Label3" runat="server" Text='<%#Eval("Name")%>'></asp:Label>
                                </div>
                                <div class="card-footer">
                                    Price:
                                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("Price")%>'></asp:Label>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DataStoreConnectionString %>" SelectCommand="SELECT * FROM [Product]"></asp:SqlDataSource>
            </div>
    

    Result:

    If these codes don't solve your issue, please feel no hesitate to post the details information with repeater codes.

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 30, 2018 9:31 AM

All replies

  • User283571144 posted

    Hi mariolopes,

    I try to use the repeater to achieve the same result but I have no luck because the items from repeater seems to be in row and I can't make colums.

    Why I can't get a grid of two or more columns? It's possible to have a grid with 4 columns with the reapeater using bootstrap?

    Since you don't provider the details codes about your repeater control, I could only create a test demo according to your previous thread's listview.

    The aspx codes as below:

                     <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                        <ItemTemplate>
                            <div class=" col-lg-3 col-md-3 col-sm-3">
                                <div class="card">
                                    <div class="card-header">
                                        ID: <asp:Label ID="Label2" runat="server" Text='<%#Eval("Id")%>'></asp:Label>
                                    </div>
                                    <div class="card-body">
                                        Name: <asp:Label ID="Label3" runat="server" Text='<%#Eval("Name")%>'></asp:Label>
                                    </div>
                                    <div class="card-footer">
                                        Price: <asp:Label ID="Label1" runat="server" Text='<%#Eval("Price")%>'></asp:Label>
                                   </div>
                                </div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DataStoreConnectionString %>" SelectCommand="SELECT * FROM [Product]"></asp:SqlDataSource>
    

    The result as below:

     

    Since bootstrap Grid system's 'col-' class need in the row class div, we should add the div with 'row' class outside the repeater.

    More details, you could refer to below codes.

            <div class="row">
                <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        <div class="col-lg-3 col-md-3 col-sm-3">
                            <div class="card">
                                <div class="card-header">
                                    ID:
                                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("Id")%>'></asp:Label>
                                </div>
                                <div class="card-body">
                                    Name:
                                    <asp:Label ID="Label3" runat="server" Text='<%#Eval("Name")%>'></asp:Label>
                                </div>
                                <div class="card-footer">
                                    Price:
                                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("Price")%>'></asp:Label>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DataStoreConnectionString %>" SelectCommand="SELECT * FROM [Product]"></asp:SqlDataSource>
            </div>
    

    Result:

    If these codes don't solve your issue, please feel no hesitate to post the details information with repeater codes.

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 30, 2018 9:31 AM
  • User-909867351 posted

    Thank you 

    That´s what I'm looking for.

    Monday, April 30, 2018 9:42 AM