ThreadAbortException

June 2008 Entries

Control does not implement IPageableItemContainer Error

You may run into this error when trying to use the new DataPager control with a GridView or any other control, other than the ListView control.  For a moment I couldn't believe that the DataPager cannot work with the GridView control.  Then after a few moments of research found out that, the Data Pager control requires the Data Control to implement the "IPageableItemContainer" interface. This is a part of the System.Web.Extensions namespace that is shipped with .NET 3.5.

This interface is currently implemented only by the List View control.  If you arent aware, ListView and Datapager are the new server controls in ASP.NET 3.5.

So, the solution is to use the Data pager control in combination with a List View control. 

To read more about the "IPageableItemContainer" interface, check http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.ipageableitemcontainer.aspx

Using the Data Pager control with List View

The List View control is new in ASP.NET 3.5.  It allows you to customize the output that is rendered by the data control.  Traditionally a DataGrid / Grid View control renders HTML Tables which can be a little heavy over the internet.  The List View allows you to define the Layout Templte and Item Template and optional Alternating Layout Template, Empty Data Template etc.,

Configuring the ListView Control

1. Start Visual Studio 2008 and select "File - New Website".

2. Chose ".NET Framework 3.5" in the dropdown on the top right of the "New Website" dialog and click "Ok"

3. It creates your Website and a Default.aspx is created.

4. Open the Default.aspx page and from the ToolBox, drag and drop a ListView control in the design view (The ListView control is under the "Data" section in the ToolBox. If you dont find it, make sure you selected the ".NET Framework 3.5" as the version as mentioned in Point 2 above. Since this control is new in ASP.NET 3.5, it wont be available if you had selected ".NET Framework 2.0" or .NET Framework 3.0" in the "New Website" Dialog.)

5. In the Design View, click the smart tag that appears next to the ListView control and select "DataSource" and chose "New DataSource" and then chose "Database" as Data Source Type

6. You can provide an ID under the "Specify an ID for the data source" textbox or leave the default one. Click Ok

7. In the "Chose your Data Connection" dialog, chose an existing connection or you could also create a "New Connection" by providing the necessary paramters, test the connection and click "Next"

8. Click "Next" and make sure you selected "Yes" under "Do you want to save the connection....." so that the connection string gets saved in the web.config file.

9. In the next screen you can chose an existing table or create a SQL procedure and do all the conditions / filtering that you want to apply.

10. Click "Finish" in the next screen to complete the Data binding process.

11. At this point if you try running the site, you would get an error contrary to the case with a DataGrid or a GridView since, both these controls just require the steps upto 10 above to start rendering the Data.

12. However, for the Listview, control we need to define the ItemTemplate and LayOutTemplate. We can either define them manually or use the Visual Studio desinger to do that.

13. Go back to the ListView in the Design Mode and click on the smart tag and click on "Configure ListView"

14. In the "Configure ListView" dialog, you can select a LayOut as well as Style. While the default is Grid, chose a Bulleted List or Flow Layout so that it can render lighter HTML accordingly.

15. Later you can switch back the Layout by again configuring the ListView.  You can also manually define the Item Template and the LayOut Template.

Configuring the DataPager Control

1. Once you are done with the ListView control, you can either chose "Enable Paging" and select "Next/Previous" or "Numeric".  When you select this, it automatically generates the DataPager control with the following settings:-

  <asp:DataPager ID="DataPager1" runat="server">
                        <Fields>
                           <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
                                ShowLastPageButton="True" />
                        </Fields>
                    </asp:DataPager>

2. Since this is automatically placed within the "LayOut Template" of the ListView it automatically provides pagination for the ListView control.

3. You can also control the attributes of the DataPager such as PagedControlID, PageSize to manually control these settings.

4. The PagedControlID in the above case is automatically perceived as the "ListView1" within which the DataPager is placed. 

5. The DataPager control can also be manually defined outside the scope of ListView1 and in that case, you need to manually set the "PagedControlID" to "ListView1" or whatever ID that is provided for the ListView control.

6. The PageSize is automatically set to 10 and you can manually override the same by providing the pagesize property.

7. The Fields need to be manually defined when the DataPager is manually added and configured to be used with the ListView control.  There are 3 options, the "NextPreviousPagerField" or "NumericPagerField" or "TemplatePagerField".  In case of "TemplatePagerField" you need to manually define the templates similar to custom paging.  In fact it is custom paging implementation.

Once you have configured the above and when you run the page, the ListView appears with the DataPager control as configured and as you check the source, you would be able to notice that since we selected "Bullted List" an <li> markup is generated instead of HTML tables, tds etc.,

The ListView is one control that allows a great amount of customization of the output. 

Scott Guthrie has written an excellent post on using the Listview to build a Product Listing page with screen shots which provides a great resource on using the List View and various customizations.

Cheers !!!

Web Development Helper Utility

Some of you who attended my recent Innovation Days and MSDN Sessions have asked for the URL for the Web Development Helper utility that I used during my demos.

Shamelessly, I am posting the link for download (shame, since it is not something I wrote and rather used an existing tool).

Well, you can download the same from http://projects.nikhilk.net/WebDevHelper/Default.aspx

The main site is http://www.nikhilk.net/ and you can find tons of useful information in this site.  Nikhil is the Principal Architect in the US Developer Division and one whom we all admire for this sheer brilliance.

A good way to restart my blog postings isnt it

Cheers !!!