The Product grid is constructed using CSS float and clear styles. The source view of this implementation is as follows:
<style type="text/css">
.productItem
{
width: 140px;
float: left;
padding: 5px;
margin: 5px;
text-align: center;
}
.groupSeparator
{
border-top: 1px dotted Gray;
height: 1px;
clear: both;
}
.itemSeparator
{
height: 180px;
width: 1px;
border-left: 1px dotted Gray;
margin-top: 5px;
margin-bottom: 5px;
float: left;
}
</style>
<asp:ListView runat="server" ID="listView" GroupItemCount="3">
<LayoutTemplate>
<div style="width: 500px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# "/Products/" + Eval("Picture") %>'
height="120" width="120" />
</div>
<div>
<b>
<%# Eval("Name") %></b></div>
<div>
Price: $<%# Eval("Price") %></div>
</div>
</ItemTemplate>
<ItemSeparatorTemplate>
<div class="itemSeparator">
</div>
</ItemSeparatorTemplate>
<GroupSeparatorTemplate>
<div class="groupSeparator">
</div>
</GroupSeparatorTemplate>
<EmptyDataTemplate>
</EmptyDataTemplate>
</asp:ListView>
The LayoutTemplate contains the outer container, which has width of 500px. The GroupTemplate contains template for the each group, which is another div with style clear:both, this allows each group to stay distinct. The ItemTemplate is the actual product template, and has a fixed width. The width of the outer container should be GroupItemCount times the width of each item + the total morgins.
Databinding of this ListView is done as it is done usually with all databound controls. The code used for this example is as follows:
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection("Connection_String_Here");
conn.Open();
SqlDataAdapter da = new SqlDataAdapter("SELECT * FROM Products", conn);
DataTable dt = new DataTable();
da.Fill(dt);
conn.Close();
listView.DataSource = dt;
listView.DataBind();
}
Finally, when the page is rendered on the Internet Explorer, it looked like this:
Source : http://www.consultsarath.com/