Customizing GridView layout in asp.net

Question

I am currently working on displaying a game library on an asp.net website. I have stored the game info (such as name, cover image etc) in a database, and I want to retrieve the games from the database and display it on my site. Right now, I am using GridView to get the data. It gets the values uname (the name of the videogame) and uimg (cover image for the game) from my table, and displays it like this:

enter image description here

However, I would like to edit the layout so that it looks something like this:

enter image description here

So as you can see, where the uname is displayed right below uimg, and with something like 3 games on each row.

The code (just using the standard GridView in Visual Studio) looks like this so far. Default.aspx:

 <asp:GridView ID="GridView1" runat="server" CellPadding="1" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false">
        <AlternatingRowStyle BackColor="White" />
        <EditRowStyle BackColor="#7C6F57" />
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#E3EAEB" />
        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F8FAFA" />
        <SortedAscendingHeaderStyle BackColor="#246B61" />
        <SortedDescendingCellStyle BackColor="#D4DFE1" />
        <SortedDescendingHeaderStyle BackColor="#15524A" />
        <Columns>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:HyperLink ID="lbl1" runat="server" NavigateUrl='<%#Eval("unavurl") %>' Text='<%#Eval("uname") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Image">
                <ItemTemplate>
                    <asp:HyperLink ID="img" runat="server" ImageUrl='<%#Eval("uimg") %>'  NavigateUrl='<%#Eval("unavurl") %>' ImageHeight="159" ImageWidth="128" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Also, just to add it, here's the C# code:

 SqlDataAdapter da = new SqlDataAdapter("select uname,uimg,unavurl from games", con);
    DataTable dt = new DataTable();
    da.Fill(dt);
    GridView1.DataSource = dt;
    DataBind();

So, does anyone know how I can achieve this? Can this be done with Gridview, or should I be looking at something different? Thanks!

You can do it with a GridView. Remember, it's just putting out an HTML table after all. So you can style it with CSS. — mason
– mason, Commented Mar 27, 2014 at 0:45

Sam · Accepted Answer · 2014-03-27 01:23:21Z

2

You should use a DataList control with the RepeatColumns property set. This can acheive the design you want.

Here's an example

http://adidotnettotal.blogspot.com.au/2013/02/datalist-example-using.html

answered Mar 27, 2014 at 1:23

Sam

2,9251 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alireza Zamani · Accepted Answer · 2018-11-20 06:28:38Z

You should use asp:TemplateField like this :

<asp:GridView runat="server" ID="gvResults" AutoGenerateColumns="False" DataKeyNames="ID" ForeColor="Black" GridLines="None">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
        <asp:TemplateField> 
        <ItemTemplate>
                    <table style="width: 100%;font-size:12px">
                <tr >
                    <td >
                        <div style=" background-color:#F3CE5A; margin:10px; padding:3px; border:1px solid #C49527; border-radius:5px; font-size:13px; font-weight:bold">
                        <asp:Label ID="Label43" runat="server" Text='<%# Bind("TransactionType") %>'></asp:Label> - <asp:Label ID="Label44" runat="server" Text='<%# Bind("BuildingType") %>'></asp:Label> - <asp:Label ID="Label48" runat="server" Text='<%# Bind("Province") %>'></asp:Label> - <asp:Label ID="Label45" runat="server" Text='<%# Bind("City") %>'></asp:Label> - <asp:Label ID="Label46" runat="server" Text='<%# Bind("Region") %>'></asp:Label> - <asp:Label ID="Label47" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
                        </div>
                    </td>
                </tr>
            </table>
                    <table style="width: 100%; font-size:12px">
                <tr>
                    <td style=" padding-right:5px">
                        <asp:Label ID="Label2" runat="server" Text="متراژ بنا :" Font-Bold="true"></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Bind("Range") %>'></asp:Label><br />
                        <asp:Label ID="Label7" runat="server" Text="مساحت زمین :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label8" runat="server" Text='<%# Bind("Area") %>'></asp:Label><br />
                        <asp:Label ID="Label9" runat="server" Text="تعداد اتاق :" Font-Bold="true"></asp:Label><asp:Label ID="Label10"
                            runat="server" Text='<%# Bind("RoomNo") %>'></asp:Label><br />
                        <asp:Label ID="Label11" runat="server" Text="شماره طبقه :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label12" runat="server" Text='<%# Bind("ClassNo") %>'></asp:Label><br />
                        <asp:Label ID="Label14" runat="server" Text="تعداد کل طبقات :" Font-Bold="true"></asp:Label><asp:Label ID="Label15"
                            runat="server" Text='<%# Bind("ClassTot") %>'></asp:Label><br />
                        <asp:Label ID="Label13" runat="server" Text="تعداد واحد در طبقه :" Font-Bold="true"></asp:Label><asp:Label ID="Label28"
                            runat="server" Text='<%# Bind("UnitsInClass") %>'></asp:Label><br />
                        <asp:Label ID="Label31" runat="server" Text="تعداد کل واحد ها :" Font-Bold="true"></asp:Label><asp:Label ID="Label32"
                            runat="server" Text='<%# Bind("UnitsTot") %>'></asp:Label><br />
                        <asp:Label ID="Label33" runat="server" Text="نمای ساختمان :" Font-Bold="true"></asp:Label><asp:Label ID="Label34"
                            runat="server" Text='<%# Bind("BuildingView") %>'></asp:Label><br />
                        <asp:Label ID="Label35" runat="server" Text="وضعیت سکونت :" Font-Bold="true"></asp:Label><asp:Label ID="Label36"
                            runat="server" Text='<%# Bind("ResidentType") %>'></asp:Label><br />
                        <asp:Label ID="Label37" runat="server" Text="سن بنا :" Font-Bold="true"></asp:Label><asp:Label ID="Label38"
                            runat="server" Text='<%# Bind("YoursOld") %>'></asp:Label><br />
                        <asp:Label ID="Label39" runat="server" Text="چند ساله :" Font-Bold="true"></asp:Label><asp:Label ID="Label40"
                            runat="server" Text='<%# Bind("Old") %>'></asp:Label><br />
                        <asp:Label ID="Label41" runat="server" Text="موقعیت جغرافیائی :" Font-Bold="true"></asp:Label><asp:Label ID="Label42"
                            runat="server" Text='<%# Bind("GeoPosition") %>'></asp:Label><br />
                    </td>
                    <td>
                        <asp:Label ID="Label3" runat="server" Text="کابینت آشپزخانه :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label4" runat="server" Text='<%# Bind("Cabinet") %>'></asp:Label><br />
                        <asp:Label ID="Label5" runat="server" Text="سرویس بهداشتی :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label6" runat="server" Text='<%# Bind("Sanitary") %>'></asp:Label><br />
                        <asp:Label ID="Label29" runat="server" Text="کف پوش :" Font-Bold="true"></asp:Label><asp:Label ID="Label30"
                            runat="server" Text='<%# Bind("Floor") %>'></asp:Label><br />
                        <asp:Label ID="Label49" runat="server" Text="قیمت :" Font-Bold="true"></asp:Label><asp:Label ID="Label50"
                            runat="server" Text='<%# Bind("TotPrice") %>'></asp:Label><br />
                        <asp:Label ID="Label51" runat="server" Text="قیمت متری :" Font-Bold="true"></asp:Label><asp:Label ID="Label52"
                            runat="server" Text='<%# Bind("Price") %>'></asp:Label><br />
                        <asp:Label ID="Label55" runat="server" Text="واحد پول :" Font-Bold="true"></asp:Label><asp:Label ID="Label56"
                            runat="server" Text='<%# Bind("Currency") %>'></asp:Label><br />
                        <asp:Label ID="Label59" runat="server" Text="تعداد پارکینگ :" Font-Bold="true"></asp:Label><asp:Label ID="Label60"
                            runat="server" Text='<%# Bind("Parking") %>'></asp:Label><br />
                        <asp:Label ID="Label61" runat="server" Text="تعداد تلفن :" Font-Bold="true"></asp:Label><asp:Label ID="Label62"
                            runat="server" Text='<%# Bind("TelsNo") %>'></asp:Label><br />
                        <asp:Label ID="Label57" runat="server" Text="دیگر امکانات :" Font-Bold="true"></asp:Label><asp:Label ID="Label58"
                            runat="server" Text='<%# Bind("Other") %>'></asp:Label><br />
                    </td>
                    <td>
                        <asp:Label ID="Label53" runat="server" Text="نوع سند / کاربری :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label54" runat="server" Text='<%# Bind("DocType") %>'></asp:Label><br />
                        <asp:Label ID="Label18" runat="server" Text="نام مالک :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label19" runat="server" Text='<%# Bind("OwnerName") %>'></asp:Label><br />
                        <asp:Label ID="Label20" runat="server" Text="پست الکترونیکی :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label21" runat="server" Text='<%# Bind("EMail") %>'></asp:Label><br />
                        <asp:Label ID="Label22" runat="server" Text="تلفن ثابت :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label23" runat="server" Text='<%# Bind("Tel1") %>'></asp:Label><br />
                        <asp:Label ID="Label24" runat="server" Text="تلفن همراه :" Font-Bold="true"></asp:Label><asp:Label
                            ID="Label25" runat="server" Text='<%# Bind("Mobile") %>'></asp:Label><br />
                        <asp:Label ID="Label26" runat="server" Text="زمان ثبت :" Font-Bold="true"></asp:Label><asp:Label ID="Label27"
                            runat="server" Text='<%# Bind("DateTime") %>'></asp:Label>
                    </td>
                </tr>
                </table>
            <table style="width: 100%;">
                <tr>
                    <td>
                    </td>
                </tr>
            </table>
                <table style="width: 100%;font-size:12px">
                <tr>
                    <td>
                    </td>
                    </div>
                </tr>
            </table>

        </ItemTemplate>
        </asp:TemplateField>
        </Columns>

Collectives™ on Stack Overflow

Customizing GridView layout in asp.net

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related