ListView and DataPager in ASP.NET 3.5

August 02, 2007 @ 2:22 am- from Hood River, Oregon

I spent a couple of hours today looking over the ListView and DataPager controls in ASP.NET 3.5. Both controls sound interesting and both provide welcome new features to the ASP.NET control arsenal. Although I'm a little wary of having yet another list control (as if we haven't enough of those already between DataGrid, DataList, Repeater, GridView and now the ListView) the ListView control kind of combines functionality of all of these controls into one. Maybe the most important feature of this control is that like the Repeater control it provides much more control over the rendering process at the cost of more markup code in the page.

The ListView is a sort of hybrid between a DataGrid and Repeater that combines the free form templating of the Repeater with the editing features of the data grid. It looks interesting because it basically allows you much more control over the layout than a DataGrid does while still giving you many of the more advanced features of the data grid. The ListView doesn't support paging natively, so the DataPager serves as an external control to provide paging features. The advantage of a separate control is that it gives you much more control about what the pager looks like and where it can be placed on the page - anywhere basically. The Pager is essentially an extender control that extends the ListView with paging capabilities.

The ListView Control

Using the ListView for basic data display is very similar to using a Repeater. You have the ListView control and a set of templates that you can apply which include:

LayoutTemplate
ItemTemplate
AlternatingItemTemplate
SelectedItemTemplate
EmptyItemTemplate
EmptyDataTemplate (?)
ItemSeparatorTemplate
GroupTemplate
GroupSeparatorTemplate
EditItemTemplate
InsertItemTemplate

That's a lot of templates <s>. There are a few new ones here like GroupTemplate and InsertItemTemplate. I haven't figured out how GroupTemplate works, but InsertItemTemplate certainly is a nice addition so you can handle both editing and adding in the same space (previously with a DataGrid you had to insertion externally or insert data manually into a DataTable to display the empty row).

Playing around with this this control feels nice in that you have all the control in the world to make it do what you want for rendering at the cost of a bit more markup code you have to create on your own. But personally I find that I struggle with data grid/grid view type issues anyway and think it's actually easier to put the layout together yourself and get REALLY what you want (case in point take Dan Wahlin's cool recent post trying to coerce a DataGrid into fixed non-scrolling headers) rather than wade through abstracted properties 5 controls deep in gridview layout. It's much easier to create custom layouts for both display and editing.

Basic Data Display with the ListView

So to start off think of the ListView as a Repeater on steroids - everything is template driven including a 'master' layout template which is the layout template. For example a simple view might look like this:

<asp:ListView ID="lvItems" runat="server" 
              DataSourceID="Data" 
              ItemContainerID="layoutTemplate" 
              DataKeyNames="Pk"
 >
    <Layouttemplate>                
        <div id="layoutTemplate" runat="server" />                        
    </Layouttemplate>        
        
    <ItemTemplate>
        <div class="itemdisplay">
        <b><%# Eval("Sku") %></b><br />
        <%# Eval("Abstract") %></div>
    </ItemTemplate>
</asp:ListView>

You have a LayoutTemplate which determines the main outer 'container' that hosts the detail items. The layout template can be any control as long as it can be marked as a server control (runat="server") as the layoutTemplate item is. You need to specify this item in the ListView's ItemContainerID property which tells the ListView where to place the detail content. In the example above the LayoutTemplate is not terribly useful since it merely puts the detail inside of the <div>. But the Layout template can also serve as a wrapper that allows for more complex layouts like tables. For example, the following ListView configuration duplicate's Dan's sample of a fixed grid header on a table (minus the styles to keep the code compact):

<asp:ListView ID="lvItemsTable" runat="server" 
              DataSourceID="Data" 
              ItemContainerID="layoutTableTemplate" 
              DataKeyNames="Pk"              
 >
    <LayoutTemplate>
        <div class="blackborder"  style="overflow-y:auto;height:500px;width:800px;">
        <table cellpadding="5" >
        <thead style="position:relative;">
        <tr class="gridheader" style="height:30px;">
            <th style="position:relative">Sku</th><th style="position:relative">Abstract</th>
        </tr>
        </thead>
        <tbody id="layoutTableTemplate" runat="server" 
               style="height:470px;overflow:scroll;overflow-x:hidden;"></tbody>
        </table>
        </div>
    </LayoutTemplate>

    <ItemTemplate>
       <tr style="height:0px;">
           <td valign="top"><%# Eval("Sku") %> </td>
           <td valign="top"><%# Eval("Abstract")  %></td>
       </tr>
    </ItemTemplate>

</asp:ListView>

Notice again how the layoutTableTemplate is set in this case to the TBODY section. The ItemTemplate is then generated *inside* of the the specified element and in this case the data inside is a bunch of rows.

Adding Paging

If you want to add Paging you have to use the new DataPager control. This control is a free standing control and what's nice about it is that you can put it anywhere on the page - it doesn't have to be directly visually associated with the control it's actually doing the paging. The pager also is an Inline element so it doesn't force any particular positioning on you - you can simply wrap it in a div to format it as you like.

To place a page I can use markup like this to put the pager anywhere on the page:

<div class="blockheader" style="padding:10px;text-align: right;">
    <asp:DataPager ID="Pager" runat="server"  
                   PagedControlID="lvItems" PageSize="5" >                       
        <Fields>
            <asp:numericpagerfield ButtonCount="10" NextPageText="..." 
                PreviousPageText="..." />
            <asp:nextpreviouspagerfield FirstPageText="First" LastPageText="Last" 
                NextPageText="Next" PreviousPageText="Previous" />
        </Fields>
    </asp:DataPager>
</div>

As you can see there are template fields inside of the DataPager so you can control the layout of the pager which is handy. The key to this control is the PagedControlID which points at a ListView (presumably any control that implements a paging interface in the future potentially). You specify a page size and that's all there's to it.

You can also stick the Pager control into the Layout Template if you choose so the Pager can be a direct part of the generated output.

The pager seems like a great idea at first - it definitely addresses the layout scenario: You get more flexibility with placement and display. However, in its current form the pager is pretty damn limited. It only works with the ListView - it sure would have been nice if it could also work with a Repeater or GridView control. But even more disappointing is that the DataPager relies on ViewState of both the Pager control and - more puzzling - of the ListView. Yup both HAVE TO HAVE Viewstate enabled for paging to work.

Further the Pager control mysteriously has no Paging Events and no SelectedPageIndex property so as far as I can tell you can't even 'manually' override the paging behavior if you do want to run without ViewState on for the ListView.

I was also hoping that the Pager would facilitate server side paging by somehow filtering the data returned from the server (using ROW OVER in Sql 2005 for example) to retrieve only the data that's actually displayed, but this is also not the case. In fact it seems that the pager simply uses the DataSource of the ListView and filters it as needed. And as with the DataGrid paging does not work against a DataReader, only with a DataGrid.

Note that one thing missing from the ListView is sorting. There's no way to organize data explicitly and you're basically on your own with that.

Editing and Adding Data to the ListView

The ListView also supports editing and adding of data via the EditItemTemplate and InsertItemTemplate. This functionality works very similar to the way it works in a GridView for editing, but it's all done with custom templates:

<asp:ListView ID="lvItems" runat="server" 
              DataSourceID="Data" 
              ItemContainerID="layoutTemplate" 
              DataKeyNames="Pk"
              InsertItemPosition="None"               
 >

    <Layouttemplate>                
        <div id="layoutTemplate" runat="server" />                        
    </Layouttemplate>        
        
    <ItemTemplate>
        <div class="itemdisplay">
        <b><%# Eval("Sku") %></b><br />
        <%# Eval("Abstract") %></div>
        
        <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />
        <asp:Button ID="Button2" runat="server" CommandName="Delete" Text="Delete" />
    </ItemTemplate>
    <AlternatingItemTemplate >
        <div class="itemdisplayalternate">
        <b><%# Eval("Sku") %></b><br />
        <%# Eval("Abstract") %></div>
        <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />
        <asp:Button ID="Button2" runat="server" CommandName="Delete" Text="Delete" />
    </AlternatingItemTemplate>
    <EditItemTemplate>
        <div class="gridalternate">
        Sku: <asp:TextBox runat="server" ID="txtSku" Text='<%# Bind("Sku") %>'></asp:TextBox>
        <br />
        Abstract: <asp:TextBox  runat="server" id="txtAbstract" Text='<%# Bind("Abstract") %>'></asp:TextBox>
        <br />
        <asp:Button ID="Button3" runat="server" CommandName="Update" Text="Update" />
        <asp:Button ID="Button4" runat="server"
                    CommandName="Cancel" Text="Cancel" /><br />
         </div>
    </EditItemTemplate>
    <InsertItemTemplate>
        <div style="background:Yellow">
        <asp:TextBox runat="server" ID="txtSku" Text='<%# Bind("Sku") %>'></asp:TextBox>
        <br />
        <asp:TextBox  runat="server" id="txtAbstract" Text='<%# Bind("Abstract") %>'></asp:TextBox>
        <br />
        </div>
        <asp:Button ID="Button3" runat="server" CommandName="Inser" Text="Insert" />
        <asp:Button ID="Button4" runat="server"
                    CommandName="Cancel" Text="Cancel" /><br />
    </InsertItemTemplate>            
</asp:ListView>

In this case I'm using a Sql Data Source (I was lazy <s>) and as long as your provide Insert and Update statements this is pretty much all that's needed. InsertItemTemplate is new for any list control and a welcome addition I think as it allows for a consistent edit interface. The Insertion point is controlled by a special property called InsertItemPosition which can be FirstItem, LastItem or None. Typically you'd set this to none, and then have a button on the form that sets it to First Item (or LastItem):

protected void btnAddItem_Click(object sender, EventArgs e)
{
    this.lvItems.InsertItemPosition = InsertItemPosition.FirstItem;
}

protected void lvItems_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    if (e.CommandName == "Update")
    {
        TextBox tb = e.Item.FindControl("txtSku") as TextBox;
        this.lvItems.InsertItemPosition = InsertItemPosition.None;
        Response.Write(tb.Text);
    }
    if (e.CommandName == "Cancel")
    {
        this.lvItems.InsertItemPosition = InsertItemPosition.None;
    }   
    
}

You can then implement an OnItemCommand and whenever you update or cancel reset to InsertItemPosition.None.

The Item Command returns a ListViewDataItem which can be used to retrieve control values, but again mysteriously is missing a DataItemIndex (properties exist but they are not set) or other direct links back to the data item. I really wish that would be one simple way to return the proper data item without having to explicitly assign a command argument - I mean c'mon the control knows which item index is active, it knows what the Data Item and Data Keys are - why can't I get these values passed to me? Especially since there is a DataItemIndex property that doesn't get set (it's always 0). This is one thing that really bugs me about any of the ASP.NET data controls... Grrr. <s>

Grouping

I haven't really figured out how to use grouping other than how to set up the template, which basically involves setting up the group container in the LayoutTemplate and defining the ItemContainer inside of the GroupTemplate:

    <Layouttemplate>                
        <div id="groupContainer" runat="server" >                                
        </div>
    </Layouttemplate> 
    <GroupTemplate>        
        <div class="blockheader" style="height:23px;padding:7px">Group Header:</div>
        <div id="layoutTemplate" runat="server" />                        
    </GroupTemplate>

You can then set a GroupItemCount to a numeric value to specify when the grouping occurs. So you can basically do a group header every 5 items for example. I don't see any way however to dynamically change the group. Group changes based on counts are pretty limited and rule out even simple one to many scenarios. Hopefully I'm just missing something here and there's a way to change this.

Summary

The new ListView control is pretty cool overall though. I provides functionality that wasn't there before and for those of use that want more control over layout than say the gridView offers at the cost of a bit more markup creation it can be a pretty nice tool. If you use templates with Repeaters and Grids a lot the ListView will likely become a common tool in your toolbox, but it obviously requires a bit more markup to make it all happen. But it's pretty flexible in terms of being able to display and edit data consistently in one place and that's definitely nice. It's a nice addition to ASP.NET 3.5.

Posted in ASP.NET Visual Studio

Feedback for this Weblog Entry

re: ListView and DataPager in ASP.NET 3.5
by John August 02, 2007 @ 3:08 am

Its a real pity the pager doesn't use the features of SQL2005 to reduce the qty data from the data tier, this seems like a real missed oppotunity.
For those not familar this means that in a situation where you have a million records, currently all these are passed from the database into .net and then sorted and paged. A better way is to sort and page inside the database and only return the paged set of data (say ten records).
In both cases the client only gets the ten records but I hope you can see the key performance difference.
BTW paging is not new to SQL server, there are ways to hack this in sql 2000 but is properly supported in sql 2005.
John.

re: ListView and DataPager in ASP.NET 3.5
by Manuel Abadia August 02, 2007 @ 4:24 am

Rick,

I have to tell that I haven't used the DataPager, but for the things you mention it seems to be useless at the moment.

I have been very involved in pager controls and after a lot of tests and different designs, I came up with the PagerDataSource that IMHO is the best paging control to integrate with the new data binding framework and data source controls.

Basically, it is a DataSource control that renders UI and that also consumes a data source. For example, if you want to page a repeater, you add a PagerDataSource and an ObjectDataSource to the page. You configure the PagerDataSource to get the data from the ObjectDataSource and configure the repeater to get the paged data from the PagerDataSource. The pager can be used in any control accepting a DataSourceId for the data.

Take a look here for more details (note that the component is not free):

http://www.manuelabadia.com/livedemo/pagerdatasource/Paging_DataSourceId1.aspx

Internally the control perform some heavy life cycle tasks to function properly and being able to connect several PagerDataSources to page the same control in a codeless way.

re: ListView and DataPager in ASP.NET 3.5
by Bob Archer August 02, 2007 @ 6:52 am

Is it just me or does eveyone get strikout font for most if not all of Rick's post in thier off line reader? I am using FeedDemon. It has been happening for the last few weeks. Did you change anything Rick?

re: ListView and DataPager in ASP.NET 3.5
by Andarial August 02, 2007 @ 7:42 am

Is it just me, or does the new ListView control look a lot like the old DataList control in VS2003/ASP.NET 1.1? A little easier to use, though, by the looks of things.

re: ListView and DataPager in ASP.NET 3.5
by Steve August 02, 2007 @ 10:55 am

I'd like to see them make their client side library more robust. Look at the ext-js, YUI, jQuery libraries - they have some rich client side controls.

This part is lacking in atlas - they are really missing a good client-side datagrid imo

re: ListView and DataPager in ASP.NET 3.5
by Rick Strahl August 02, 2007 @ 11:09 am

@Bob - The strike out is like because of my <s> in the text. However, this looks like a bug with FeedDemon if it's not properly escaping the HTML from the feed and treating it as literal HTML. It's proper in the feed as far as I can tell.

@Manuel - that's kind of what I was thinking. I think I'll be building a new pager as well and use the pager as a data source that actually feeds the paged data. Now that is really what I was hoping for (or at least this functionality).

@Steve - don't get me started on ATLAS and the client library. The client library in general is lacking in a big way compared to any other of the more popular JavaScript libraries (Prototype, jQuery, Yahoo, Dojo etc.) and it not just because there are no controls. It really feels that after Ajax 1.0 was released Microsoft lost interest and put all the effort into Silverlight. Maybe that is where MS is heading with all of this, but they have a long way to go there too. I really wish that things were 'finished' somewhere instead of always ending up in this half complete stage where you always feel like you're waiting for 'closure'. For the Ajax client library especially it seems to me that a lot more value could be added for very little extra cost at this point that the base language system is in place.

ListViewとDataPager
by どっとねっとふぁんBlog August 02, 2007 @ 9:37 pm

ListView and DataPager in ASP.NET 3.5 ASP.NET 3.5で導入されるListViewとDataPagerの情報が載せられています。自由にレイアウトできて更新、そして挿入もサポートされるのはうれしいですね。より便利になるなぁ...

re: ListView and DataPager in ASP.NET 3.5
by Robin August 03, 2007 @ 10:01 am

Hi Rick, at TechEd Scott Guthrie did an example with the listview doing efficient paging. I believe he used the LinqDataSource and Take() method. On the other hand, I am not sure if that is supported without the LinqDataSource.

re: ListView and DataPager in ASP.NET 3.5
by volnet August 05, 2007 @ 8:00 am

If the DataPager won't improve itself.I think I will never use it~:)

ASP.NET 3.5 controls
by Daniel Moth August 07, 2007 @ 7:34 am

ASP.NET 3.5 controls

re: ListView and DataPager in ASP.NET 3.5
by VSQA August 09, 2007 @ 12:41 am

Gooooooooood :)

re: ListView and DataPager in ASP.NET 3.5
by Josh Stodola August 10, 2007 @ 7:01 am

Guru has a post on this: http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1-building-a-product-listing-page-with-clean-css-ui.aspx

re: ListView and DataPager in ASP.NET 3.5
by liuyun August 13, 2007 @ 5:30 am

HI,is it that if I want to use the DataPager control,I must use a DataSources control?

re: ListView and DataPager in ASP.NET 3.5
by ashchan September 02, 2007 @ 6:54 am

Rick Strahl写的ListView and DataPager in ASP.NET 3.5较深入地讲述了ListView的一些特性。

re: ListView and DataPager in ASP.NET 3.5
by Mickaël September 21, 2007 @ 3:47 am

Rick, did you tried ListView with your own datasource (and DataKeyNames attribute specified) that you databind in the page_load? It tried it and it does not seams to work: i get exception if I press on a button I added having "Edit" as command. As soon as I go back to a SqlDataSource...no more problem.

re: ListView sorting
by Arthur September 23, 2007 @ 5:05 am

ListView have a Sorting property. We are using this in <a href="http://www.sitemapwriter.com">Sitemap Writer Pro</a> project.

re: ListView and DataPager in ASP.NET 3.5
by willis October 31, 2007 @ 7:15 am

Rick, I'm trying to get access controls in the EditItemTemplate of a list
view when the user edits an item. I need to set focus to a textbox in
this template after post back because the ListView is in a long
scrolling div. Without setting focus the user needs to scroll down the
div after postback to get to the item.

I've tried using listview.FindControl('tbxEdit') but this comes back
blank. Does anyone have any ideas?

re: ListView and DataPager in ASP.NET 3.5
by Jon Galloway November 20, 2007 @ 4:47 pm

There are some subtle but breaking changes in the RTM version of the ListView: http://www.danielmoth.com/Blog/2007/11/item-placeholder-must-be-specified-on.html

re: ListView and DataPager in ASP.NET 3.5
by Joseph Baggett December 03, 2007 @ 9:33 am

It is a shame that we have yet another list/grid control in which we won't have full control over unless we write our own extended controls to get what we as developers want.

Other than that, there were good ideas put into the control, but the fact you can't control server side paging plus sorting kills the use of it for me.

ObjectDatasource, SqlDataSource, and LINQ are poor implementations of trying to do "auto-magical" stuff that either are hard-coupled, lack an OOP approach, or doesn't make sense to use in an OOP much less lose efficiency. Can we just get a standard control in which developers can have full control over sorting, paging, etc. instead of having to extend controls?

Sounds like the DataGrid should be included in the toolbox again.

re: ListView and DataPager in ASP.NET 3.5
by Steve December 04, 2007 @ 11:02 am

Rick - I made that comment about JQuery, etc... well, now that I have used the listview:

Because they give the control I need (ie. using thead, etc..) it's easy now to add a jQuery table with sorting (and paging).

I was using Repeater before to do this, I'm not sure I'm really getting too much more from a Listview, but at least it's easy to control how to layout the control.

re: ListView and DataPager in ASP.NET 3.5
by Rick Strahl December 04, 2007 @ 1:20 pm

@Steve - Yeah I'm finding myself using the ListView mostly like a Repeater too and in that capacity there's not a lot of difference. I think the big benefit of ListView is if you need to do editing since you can get access to specific rows and display an edit view. Also the Group view is nice as you can constrain column counts.

re: ListView and DataPager in ASP.NET 3.5
by Ego December 21, 2007 @ 2:11 am

Why should presentation view control be aware of data layer paging? It's data source object job! SQL2005 works great for me with DataPager+ListView+ObjectDataSource (with enabled paging) + nHibernate+SQL2005.

re: ListView and DataPager in ASP.NET 3.5
by Rblaise January 21, 2008 @ 12:07 pm

You can indeed use efficient database paging with the listview. I am using it against and objectdatasouce and my store proc is doing the filtering. It is no different than the gridview. You just have to use the steps below. Please see this article from Scott.

http://aspnet.4guysfromrolla.com/articles/031506-1.aspx

Key points from article

1. Set EnablePaging to True
2. Set SelectMethod to the method that accepts the starting index and maximum number of rows input parameters
3. Set the StartRowIndexParameterName to the name of the integer input parameter in your SelectMethod that accepts the starting index; if you do not provide this value it defaults to startRowIndex
4. Set the MaximumRowsParameterName to the name of the integer input parameter in your SelectMethod that accepts the maximum number of rows to return; if you do not provide this value it defaults to maximumRows
5. Set SelectCountMethod to the method that returns the total number of records being paged through

re: ListView and DataPager in ASP.NET 3.5
by Alex February 20, 2008 @ 6:54 am

Many thanks for sharing - again. We're thinking of moving to 3.5 and I just love articles like this...

re: ListView and DataPager in ASP.NET 3.5
by James March 27, 2008 @ 7:32 am

FYI: DataPager control can absolutely do server side paging... you just need a Data Source that supports it, like LinqDataSource for example.

re: ListView and DataPager in ASP.NET 3.5
by Prawin April 01, 2008 @ 11:19 pm

Rick,
We generally develop applications which are SEO freindly so the paging control should support multiple query strings.
Is there a way to add multiple query strings to the data pager control? The DataPager control works gr8 fro single query string.

Thanks
Prawin

re: ListView and DataPager in ASP.NET 3.5
by Prawin April 02, 2008 @ 12:41 am

Yehh.. I got it.
For multiple query strings we dont need to do anything gr8, we just need to set the "QueryStringField" thats it. It will automatically persists the existing Query srtings.
EG:
If we have a Categeory details page. We will display the details of the category in a details page by passing the CategoryId say http://localhost/Website/CategoryDetails.aspx?Categoryid=1 and assume that we are displaying the Product details in a listview in the CategoryDetails page with paging enabled using DataPager control. By just assigning the query string "PageNo" to the property "QueryStringField" property of the DataPager control, our job is done. All the page numbers in the datapager copntrol will become hyperlinks with the following urls
url for 1 -- http://localhost/Website/CategoryDetails.aspx?Categoryid=1&PageNo=1
url for 2 -- http://localhost/Website/CategoryDetails.aspx?Categoryid=1&PageNo=2
url for 3 -- http://localhost/Website/CategoryDetails.aspx?Categoryid=1&PageNo=3 and so on...

re: ListView and DataPager in ASP.NET 3.5
by John Markas May 18, 2008 @ 8:19 pm

Every release of Visual Studio claims to have a decent system for paging/sorting, but what we need is a more flexible control that has everything needed to do server side paging, sorting, filtering etc and where we can hook up our db access easily. I've developed my own controls for paging/sorting and use a standard stored procedure for filtering and paging, so it's just a matter of plugging them all on the same page with a few lines of code for binding and changing pages. Why would I want to spend all this time fiddling around with half-baked Microsoft controls which don't do the job properly, and risk having to recode them all over again in the next release when another control hits the market. I just don't have the time to stuff around with these poor controls, and it's a no brainer coding your own components and reusing them everywhere you need them.

re: ListView and DataPager in ASP.NET 3.5
by kuldeep June 02, 2008 @ 11:09 pm

Its really nice to study...
provide good info.
thanks..

re: ListView and DataPager in ASP.NET 3.5
by Narendra Singh Solanki June 10, 2008 @ 1:27 am

FYI:
DataPager control can absolutely do server side paging...
you just need a Data Source that supports it,
like LinqDataSource for example.

hope fully it will be use full for developers.

re: ListView and DataPager in ASP.NET 3.5
by John Lee June 24, 2008 @ 8:05 am

Microsoft really was shortsighted when it came to grouptemplates. I really thought that grouptemplates allowed for dynamic lengths based off data. Turns out it doesn't even support databinding.

What I had to do is create my own control overriding certain functions in listview in order to make this all work.

It hasn't been battle-tested but it seems to work:

Imports System.ComponentModel
Imports System.Globalization
Imports System.Reflection

'Code in Customlistviewithgroups was mostly copied from the actual Listview code garned by Lutz Roeder's Reflector.
'Main purpose here is to add the GroupKeyName property to allow for variable group lengths.
Namespace GenericControls

    <Serializable(), _
    ToolboxData("<{0}:CustomListView runat=server></{0}:CustomListView>")> _
    Public Class CustomListViewWithGroups
        Inherits ListView
        Private theGroupkeyName As String
        <Bindable(False), Category("Appearance"), DefaultValue("")> _
        Public Property GroupKeyName() As String
            Get
                Return theGroupkeyName
            End Get
            Set(ByVal value As String)
                If IsNothing(theGroupkeyName) Then theGroupkeyName = ""
                theGroupkeyName = value
            End Set
        End Property

        Private _groupsOriginalIndexOfGroupPlaceholderInContainer As Integer
        Private _groupsGroupPlaceholderContainer As Control
        Private _groupsItemCreatedCount As Integer
        Private _autoIDIndex As Integer

        'This is the main function in listview that generates the child controls based off the templates.
        Protected Overrides Function CreateItemsInGroups(ByVal dataSource As System.Web.UI.WebControls.ListViewPagedDataSource, ByVal dataBinding As Boolean, ByVal insertPosition As System.Web.UI.WebControls.InsertItemPosition, ByVal keyArray As System.Collections.ArrayList) As System.Collections.Generic.IList(Of System.Web.UI.WebControls.ListViewDataItem)
            If (Me._groupsOriginalIndexOfGroupPlaceholderInContainer = -1) Then
                Me._groupsGroupPlaceholderContainer = Me.GetPreparedContainerInfo(Me, False, Me._groupsOriginalIndexOfGroupPlaceholderInContainer)
            End If
            Dim addLocation As Integer = Me._groupsOriginalIndexOfGroupPlaceholderInContainer
            Me._groupsItemCreatedCount = 0
            Dim placeholderIndex As Integer = 0
            Dim control As Control = Nothing
            Dim list As New List(Of ListViewDataItem)
            Dim num3 As Integer = 0
            Dim displayIndex As Integer = 0
            If (insertPosition = InsertItemPosition.FirstItem) Then
                Dim container As New ListViewContainer
                Me.AutoIDControl(container)
                Me.InstantiateGroupTemplate(container)
                Me.AddControlToContainer(container, Me._groupsGroupPlaceholderContainer, addLocation)
                addLocation += 1
                control = Me.GetPreparedContainerInfo(container, True, placeholderIndex)
                Dim item As ListViewItem = Me.CreateInsertItem
                Me.AddControlToContainer(item, control, placeholderIndex)
                placeholderIndex += 1
                num3 += 1
            End If
            Dim obj2 As Object

            For Each obj2 In dataSource
                Dim container3 As ListViewDataItem = Nothing
                If IsFirstInGroup(dataSource, num3) Then
                    If ((num3 <> 0) AndAlso (Not MyBase.GroupSeparatorTemplate Is Nothing)) Then
                        Dim container2 As New ListViewContainer
                        Me.AutoIDControl(container2)
                        Me.InstantiateGroupSeparatorTemplate(container2)
                        Me.AddControlToContainer(container2, Me._groupsGroupPlaceholderContainer, addLocation)
                        addLocation += 1
                    End If
                    'Dim container3 As New ListViewContainer
                    container3 = New ListViewDataItem((displayIndex + Me.StartRowIndex), displayIndex)

                    Me.AutoIDControl(container3)
                    Me.InstantiateGroupTemplate(container3)

                    Me.AddControlToContainer(container3, Me._groupsGroupPlaceholderContainer, addLocation)
                    addLocation += 1
                    control = Me.GetPreparedContainerInfo(container3, True, placeholderIndex)
                End If
                Dim item2 As ListViewDataItem = Me.CreateDataItem((displayIndex + Me.StartRowIndex), displayIndex)
                Me.InstantiateItemTemplate(item2, displayIndex)
                If dataBinding Then
                    item2.DataItem = obj2

                    'Adding support for databinding in the group template
                    If Not IsNothing(container3) Then container3.DataItem = obj2

                    Dim keyTable As New OrderedDictionary(MyBase.DataKeyNames.Length)
                    Dim str As String
                    For Each str In MyBase.DataKeyNames
                        Dim propertyValue As Object = DataBinder.GetPropertyValue(obj2, str)
                        keyTable.Add(str, propertyValue)
                    Next
                    If (keyArray.Count = displayIndex) Then
                        keyArray.Add(New DataKey(keyTable, MyBase.DataKeyNames))
                    Else
                        keyArray.Item(displayIndex) = New DataKey(keyTable, MyBase.DataKeyNames)
                    End If
                End If
                Me.OnItemCreated(New ListViewItemEventArgs(item2))
                If (Not IsFirstInGroup(dataSource, num3) AndAlso (Not MyBase.ItemSeparatorTemplate Is Nothing)) Then
                    Dim container4 As New ListViewContainer
                    Me.InstantiateItemSeparatorTemplate(container4)
                    Me.AddControlToContainer(container4, control, placeholderIndex)
                    placeholderIndex += 1
                End If
                Me.AddControlToContainer(item2, control, placeholderIndex)
                placeholderIndex += 1
                list.Add(item2)
                If dataBinding Then
                    'Adding support for databinding in the group template
                    If Not IsNothing(container3) Then
                        container3.DataBind()
                        container3.DataItem = Nothing
                    End If
                    item2.DataBind()
                    Me.OnItemDataBound(New ListViewItemEventArgs(item2))
                    item2.DataItem = Nothing
                End If
                num3 += 1
                displayIndex += 1
            Next
            If (insertPosition = InsertItemPosition.LastItem) Then
                If IsFirstInGroup(dataSource, num3) Then
                    If ((num3 <> 0) AndAlso (Not MyBase.GroupSeparatorTemplate Is Nothing)) Then
                        Dim container5 As New ListViewContainer
                        Me.AutoIDControl(container5)
                        Me.InstantiateGroupSeparatorTemplate(container5)
                        Me.AddControlToContainer(container5, Me._groupsGroupPlaceholderContainer, addLocation)
                        addLocation += 1
                    End If
                    Dim container6 As New ListViewContainer
                    Me.AutoIDControl(container6)
                    Me.InstantiateGroupTemplate(container6)
                    Me.AddControlToContainer(container6, Me._groupsGroupPlaceholderContainer, addLocation)
                    addLocation += 1
                    control = Me.GetPreparedContainerInfo(container6, True, placeholderIndex)
                End If
                If (Not IsFirstInGroup(dataSource, num3) AndAlso (Not MyBase.ItemSeparatorTemplate Is Nothing)) Then
                    Dim container7 As New ListViewContainer
                    Me.InstantiateItemSeparatorTemplate(container7)
                    Me.AddControlToContainer(container7, control, placeholderIndex)
                    placeholderIndex += 1
                End If
                Dim item3 As ListViewItem = Me.CreateInsertItem
                Me.AddControlToContainer(item3, control, placeholderIndex)
                placeholderIndex += 1
                num3 += 1
            End If
            If (Not MyBase.EmptyItemTemplate Is Nothing) Then
                Do While Not IsFirstInGroup(dataSource, num3)
                    If (Not MyBase.ItemSeparatorTemplate Is Nothing) Then
                        Dim container8 As New ListViewContainer
                        Me.InstantiateItemSeparatorTemplate(container8)
                        Me.AddControlToContainer(container8, control, placeholderIndex)
                        placeholderIndex += 1
                    End If
                    Dim item4 As ListViewItem = Me.CreateEmptyItem
                    Me.AddControlToContainer(item4, control, placeholderIndex)
                    placeholderIndex += 1
                    num3 += 1
                Loop
            End If
            Me._groupsItemCreatedCount = (addLocation - Me._groupsOriginalIndexOfGroupPlaceholderInContainer)
            Return list

        End Function

        'This is a new function to determine whether to output the group template or not.
        Private Function IsFirstInGroup(ByVal datasource As ListViewPagedDataSource, ByVal theIndex As Integer) As Boolean
            If Me.GroupKeyName <> "" Then
                If theIndex = 0 Then Return True
                Dim ElementType As Type = datasource.DataSource(theIndex).GetType
                Dim KeyValue As String = ElementType.GetProperty(GroupKeyName, BindingFlags.IgnoreCase Or BindingFlags.Public Or BindingFlags.Instance Or BindingFlags.DeclaredOnly).GetValue(datasource.DataSource(theIndex), Nothing).ToString()
                Dim PrevKeyValue As String = ElementType.GetProperty(GroupKeyName, BindingFlags.IgnoreCase Or BindingFlags.Public Or BindingFlags.Instance Or BindingFlags.DeclaredOnly).GetValue(datasource.DataSource(theIndex - 1), Nothing).ToString()
                Return Not KeyValue.Equals(PrevKeyValue)
            Else
                Return theIndex Mod Me.GroupItemCount = 0
            End If

        End Function



        Private Function GetPreparedContainerInfo(ByVal outerContainer As Control, ByVal isItem As Boolean, ByRef placeholderIndex As Integer) As Control
            Dim containerID As String = IIf(isItem, Me.ItemPlaceholderID, Me.GroupPlaceholderID)
            Dim control As Control = Me.FindPlaceholder(containerID, outerContainer)
            If (control Is Nothing) Then
                If isItem Then
                    Throw New InvalidOperationException("CustomListViewWithGroups:  No Group PlaceHolder found.")
                End If
                Throw New InvalidOperationException("CustomListViewWithGroups:  No Group PlaceHolder found.")
            End If
            Dim parent As Control = control.Parent
            placeholderIndex = parent.Controls.IndexOf(control)
            parent.Controls.Remove(control)
            Return parent
        End Function
        Protected Overrides Sub CreateLayoutTemplate()
            _groupsOriginalIndexOfGroupPlaceholderInContainer = -1
            _groupsGroupPlaceholderContainer = Nothing
            MyBase.CreateLayoutTemplate()
        End Sub

        'Had to override this because we have a lot of private fields that have been "overridden"
        Protected Overrides Sub RemoveItems()
            If (Not MyBase.GroupTemplate Is Nothing) Then
                If (Me._groupsItemCreatedCount > 0) Then
                    Dim i As Integer
                    For i = 0 To Me._groupsItemCreatedCount - 1
                        Me._groupsGroupPlaceholderContainer.Controls.RemoveAt(Me._groupsOriginalIndexOfGroupPlaceholderInContainer)
                    Next i
                    Me._groupsItemCreatedCount = 0
                End If
            Else
                MyBase.RemoveItems()
            End If
            Me._autoIDIndex = 0
        End Sub
        Private Sub AutoIDControl(ByVal control As Control)
            Me._autoIDIndex += 1
            control.ID = ("ctrl" & Me._autoIDIndex.ToString(CultureInfo.InvariantCulture))
        End Sub


    End Class

    Friend Class ListViewContainer
        Inherits Control
        Implements INamingContainer
        ' Methods
        Protected Overrides Function OnBubbleEvent(ByVal source As Object, ByVal e As EventArgs) As Boolean
            If TypeOf e Is ListViewCommandEventArgs Then
                MyBase.RaiseBubbleEvent(source, e)
                Return True
            End If
            If TypeOf e Is CommandEventArgs Then
                Dim args As New ListViewCommandEventArgs(Nothing, source, DirectCast(e, CommandEventArgs))
                MyBase.RaiseBubbleEvent(Me, args)
                Return True
            End If
            Return False
        End Function

    End Class



End Namespace

re: ListView and DataPager in ASP.NET 3.5
by John Lee June 24, 2008 @ 8:12 am

Probably should tell you how to use it. GroupKeyName is a new property for the control that determines when the group template is applied. So if you are binding to a datasource such as:

TypeOfAnimal Animal
mammal dog
mammal cat
mammal rabbit
reptile snake
reptile lizard

Your GroupKeyName would be TypeOfAnimal. You can even eval("TypeOfAnimal") in your grouptemplate.

I really have learned a lot from your blogs, especially your Linq BLLWrapper. It makes Linq-to-SQL very useful to me. I hope your find this useful as a small token of appreciation.

re: ListView and DataPager in ASP.NET 3.5
by Slavo August 14, 2008 @ 6:15 am

What happended to the <HeaderTemplate> and <FooterTemplate>? It's true you might not actually bind the list and have only a fixed number of items, but still... any good reason on why we don't have those in ListView?

re: ListView and DataPager in ASP.NET 3.5
by Slavo August 14, 2008 @ 6:38 am

Really stupid previous comment, nevermind.

re: ListView and DataPager in ASP.NET 3.5
by bharathi September 18, 2008 @ 2:28 am

List view is greatfeature in vs 2008 with asp.net3.5
It really good

re: ListView and DataPager in ASP.NET 3.5
by zaladane October 06, 2008 @ 2:39 pm

Nice article!
What happen to the url when you are using urlrewriting though? the datapager button are using the old url and appending the pageId query string to it! How can one overcome that issue without having to create a control adapter for the datapager?

re: ListView and DataPager in ASP.NET 3.5
by nihaa October 21, 2008 @ 7:52 am

Hai ,

I am trying to add a subheader to my repeater control based on the categories retrived .

I tried this on a grodview control and works well.
But not able to work it out on a repaeter please any oe help me to do this ....i am running out of time ...i have to submit it today evening...

here isthe code i used in gridview and worked perfect..

can any one help me to make changes to it so that i can use it for a repeater ,under the itemdatabound event

// If the current row is a DataRow (and not a Header or Footer row), then do stuff.
if (e.Row.RowType == DataControlRowType.DataRow)
{
DataRowView drv = (DataRowView)e.Row.DataItem;

if (tmpCategoryName != drv["q1option"].ToString())
{
tmpCategoryName = drv["q1option"].ToString();

// Get a reference to the current row's Parent, which is the Gridview (which happens to be a table)
Table tbl = e.Row.Parent as Table;

if (tbl != null)
{
GridViewRow row = new GridViewRow(-1, -1, DataControlRowType.DataRow, DataControlRowState.Normal);

TableCell cell = new TableCell();

// Span the row across all of the columns in the Gridview
cell.ColumnSpan = this.GdProd.Columns.Count;

cell.Width = Unit.Percentage(100);
cell.Style.Add("font-weight", "bold");
cell.Style.Add("background-color", "#c0c0c0");
cell.Style.Add("color", "white");

HtmlGenericControl span = new HtmlGenericControl("span");
span.InnerHtml = tmpCategoryName;

cell.Controls.Add(span);

row.Cells.Add(cell);

tbl.Rows.AddAt(tbl.Rows.Count - 1, row);
}
}
}

thanks in advance

re: ListView and DataPager in ASP.NET 3.5
by varun October 22, 2008 @ 10:35 am

I want to know if I want to set the page size of datapager at run time , how can I do that.

re: ListView and DataPager in ASP.NET 3.5
by Giuliano Lemes November 26, 2008 @ 5:52 am

Hi Rick,
First of all, as usually, great article.
We are from http://www.placetoask.com team, and we are facing a few little problems using listview + datapager combo. Most all of our listviewers and datapagers resides inside a control(ascx) and for the pager works well we need to put the listview.DataBind() inside the event OnPreRender of control, we have fields filters in parent pages that sort data etc..., The problem its when trying to sort the results showing in the page, we do not getting the same results as the datasource binded in listview, i noticed in debug that iqueryable collection have the correct count, listview are binded but listview shows 1 row less. While in debug i watched that even if the datasource has 2 items, the listview_ItemDataBound event just fire once. Anyone had same problem or any clue to solve this problem?.
Thx,
Giuliano