How to Show Product in multiple Rows gridview asp.net

Question

how can I show product in Horizontal? max 3,4 rows in gridview asp.net like 2nd product(printed T Shirt) should come up with in line with 1st product

currently i'm using this code and its showing product vertically

 <asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False"
         CssClass="table table-hover"
         ShowFooter="True"
         ShowHeaderWhenEmpty="True" RepeatRows="3"
         Height="293px" Width="310px" RepeatColumns="4" RepeatDirection="Horizontal"
         OnSelectedIndexChanged="gvUsers_SelectedIndexChanged"
         OnRowDataBound="gvUsers_OnRowDataBound">

         <Columns>
             <asp:TemplateField Visible="true">
                 <ItemTemplate>                     
                     <table>
                         <tr>
                             <td style="text-align: center; background-color: #5f98f3">
                                 <asp:Label runat="server" ID="lblproductid" Visible="false" Text='<%#Eval("ProductID")%>'></asp:Label>
                                 <asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductName") %>' Font-Bold="True"
                                     Font-Names="Open Sans Extrabold" ForeColor="White"></asp:Label>
                             </td>
                         </tr>
                         <tr>
                             <td style="text-align: center">
                                 <%-- <asp:LinkButton runat="server" ID="lbtnProductDetail" OnClick="ProductDetail_click">--%>
                                 <asp:Image ID="Image1" runat="server" BorderColor="#5F98F3" BorderWidth="1px"
                                     Height="279px" Width="278px" ImageUrl='<%# Eval("ImagePath","{0}")%>' />
                             </td>
                         </tr>
                      <tr>
                             <td style="text-align: center; background-color: #5f98f3">
                                 <asp:Label ID="Label2" runat="server" Text="Price: Rs" Font-Bold="True"
                                     Font-Names="Arial" ForeColor="White" Style="text-align: center"></asp:Label>
                                 <asp:Label ID="Label3" runat="server" Text='<%# Eval("ActualPrice") %>' Font-Bold="True"
                                     Font-Names="Arial" ForeColor="White" Style="text-align: center"></asp:Label>
                             </td>
                         </tr>
                     </table>
                 </ItemTemplate>
             </asp:TemplateField>
         </Columns> 
     </asp:GridView>

Doesn't look like gridview supports repeatdirection. Check this question: https://stackoverflow.com/questions/20997094/horizontally-repeat-data-in-gridview — erastl, Aug 04 '22 at 15:44

score 0 · Answer 1 · answered Aug 05 '22 at 14:32

Ok, a grid view is for showing a grid of data - not some kind of "card" view as it is often called and as your picture shows.

So, if I have a gridview of data like this:

If I want a card view or layout of some data that is NOT a grid, then use a repeater, or even say a datalist.

Datalist even has a "repeat" colum setting.

So, this markup:

<asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="3">
    <ItemTemplate>                    
        <div style="border-style:solid;color:black;width:320px;height:450px;margin-right:10px">

        <div style="text-align:center;padding:2px 10px 2px 10px">
            <h3><%# Eval("Fighter") %></h3>
            <asp:Image ID="Image2" runat="server" 
                ImageUrl = '<%# Eval("ImagePath") %>' Width="170" />
            <h4>Engine</h4>
            <asp:Label ID="EngineLabel2" runat="server" Text='<%# Eval("Engine") %>' />
            <h4>Description</h4>
            <asp:Label ID="DescLabel" runat="server" Text='<%# Eval("Description") %>' />
            </div>
        </div>
    </ItemTemplate>
</asp:DataList>

This code to load:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim rstData As DataTable
        rstData = MyRst("select * from Fighters")

        DataList1.DataSource = rstData
        DataList1.DataBind()
    End If
End Sub


Public Function MyRst(strSQL As String) As DataTable

    Dim rstData As New DataTable
    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            rstData.Load(cmdSQL.ExecuteReader)
            rstData.TableName = strSQL
        End Using
    End Using
    Return rstData

End Function

And now we get this:

So datalist works quite well. You can also often use repeater - and float each content left in the repeater.

But, reapter, or say datalist works MUCH better then a datalist.

A listview could also work.

But out of ALL of the choices, GridView is your worst choice for display of a card like view layout.

So, grid view is for viewing a grid of data - just like its name suggests.

How to Show Product in multiple Rows gridview asp.net

1 Answers1