Monday, October 26, 2009

How to use ListView Control of ASP.Net 3.5?

Hi Friends,

ASP.net 3.5 have one new control called ListView as compare to .Net framework 2.0.

Here i will mention a few benefits/use of ListView.

Now when we want to display items [our data] in repeated column but we need to break it to another row. for certain scenario we were previously using DataList of v2.0

What is difference between DataList and ListView
DataList renders table structure with  and  structure, while ListView have free form like repeater.

Now what is difference between Repeater and ListView
Repeater can repeat same ItemTemplate for each of your data item, while in ListView you will be able to repeate Same ItemTemplate and break it through GroupTemplate in LayoutTemplate.

LayoutTemplate is basically a template which will cover all of your items. In the LayoutTemplate you need to specify the GroupTemplate.

<LayoutTemplate >
  <div>
     <asp:placeholder ID="groupPlaceholder" runat="server">
  </asp:placeholder></div>
</LayoutTemplate >

LayoutTemplate must contain either GroupTemplate or ItemTemplate to bind and load the data.

Now we will have a question that what is GroupTemplate?
In GroupTemplate you will be able to specify your template of group of item.

<GroupTemplate >
  <ul>
     <asp:placeholder id="itemPlaceholder" runat="server">
  </asp:placeholder></ul>
</GroupTemplate >

In group template you must specify the itemPlaceholder in order to achive the items to be bound.

Now your will specify your item view in ItemTemplate
<ItemTemplate>
<!-- Your Item Code -->
  <li>
     <%# Eval("Name") %>
  </li>
</ItemTemplate>

Now you will say where would i define that how much item should be covered in one group. Here is the answer, you need to assign it to GroupItemCount property of ListView.

<asp:ListView ID="ListView1" runat="server" GroupItemCount="3">
///Your templates will go here LayoutTemplate, GroupTemplate, ItemTemplate
</asp:ListView>

Above code will repeat 3 item per group.

So output of this sample code will be like
<div>
  <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
  </ul>
  <ul>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
  </ul>
</div>

Hope it helps.
I will post further details in another article.

Have a nice programming day.....