CODEWITHSUNDEEP
asp.netgridview
Houlahan
Houlahan

Reputation: 783

Html Formatting Grid View

I'm trying to format my grid view so it looks like the following:

enter image description here

so instead of looking like a table it has 2 columns and 3 rows. Thanks in advance

Upvotes: 1

Views: 1894

Answers (4)

outlookrperson
outlookrperson

Reputation: 2821

If the use of a GridView is mandatory, you can do this:

<h2>
    GridView
</h2>
<asp:GridView id="MyList" CssClass="Grid" AutoGenerateColumns="false" runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <div class="item_container">
                    <div class="image_container">
                        <asp:Image ImageUrl='<%# Eval("ImageUrl") %>' runat="server"/>
                    </div>
                    <div class="link_text_container">
                        <asp:HyperLink Text="Some Link" NavigateUrl='<%# Eval("Link") %>' runat="server" /><br />
                        <asp:Label Text='<%# Eval("Text") %>' runat="server" />
                    </div>
                    <div class="datetime_container">
                        <asp:Label Text='<%# Eval("DateTime") %>' runat="server" />
                    </div>
                </div>  
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Only for demonstration purposes, in code behind you can do this:

public class Item
{
    public string ImageUrl { get; set; }
    public string Link { get; set; }
    public string Text { get; set; }
    public string DateTime { get; set; }
}

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Item[] items = new Item[5]{ new Item()
                                        {
                                            ImageUrl="img/imageplaceholder.jpg",
                                            Link="~/somelink1.html",
                                            Text="Some Text 1",
                                            DateTime=DateTime.Now.ToShortDateString()
                                        }, 
                                    new Item()
                                        {
                                            ImageUrl="img/imageplaceholder.jpg",
                                            Link="~/somelink2.html",
                                            Text="Some Text 2",
                                            DateTime=DateTime.Now.ToShortDateString()
                                        }, 
                                    new Item()
                                        {
                                            ImageUrl="img/imageplaceholder.jpg",
                                            Link="~/somelink3.html",
                                            Text="Some Text 3",
                                            DateTime=DateTime.Now.ToShortDateString()
                                        }, 
                                    new Item()
                                        {
                                            ImageUrl="img/imageplaceholder.jpg",
                                            Link="~/somelink4.html",
                                            Text="Some Text 4",
                                            DateTime=DateTime.Now.ToShortDateString()
                                        }, 
                                    new Item()
                                        {
                                            ImageUrl="img/imageplaceholder.jpg",
                                            Link="~/somelink5.html",
                                            Text="Some Text 5",
                                            DateTime=DateTime.Now.ToShortDateString()
                                        }
                                  };

            MyList.DataSource = items;
            MyList.DataBind();
        }
    }
}

And use the following CSS:

table
{
    table-layout:fixed;
    width:100%;
}

.item_container
{
    width: 700px;
    background-color:#FFE5FF;
}

.image_container
{
    width:100px;
    float:left;
}

.link_text_container
{
    width: 600px;
    float: left;
    background-color:#E5FFF2;
}

.datetime_container
{
    width: 100%;
    clear:both;
    background-color:#B3ECFF;
}

It will produce the desired layout with a GridView, but indeed, the asp:ListView is a better choice.

GridView Layout http://i53.tinypic.com/2l5l5s.jpg

Upvotes: 1

Devin Burke
Devin Burke

Reputation: 13820

Use an asp:ListView instead. It allows for template items, meaning you can specify the HTML yourself while still having much of the list-type functionality that, say, an asp:Repeater would lack.

The listview was new to .NET 3.5, though, so if you are using an older version, I would just use the repeater. Both allow you to specify your own markup, which you will need to do to render your items as you have them shown above.

Upvotes: 1

Tim B James
Tim B James

Reputation: 20364

I would personally use a asp:Repeater control as that gives you greater control over the html you want to display.

Upvotes: 1

p.campbell
p.campbell

Reputation: 100557

Consider switching your server control to an <asp:ListView>. This gives you granular control over your markup, compared to a gridview.

Here's a great ListView tutortial by the Gu.

Upvotes: 3

Related Questions