Get Microsoft Silverlight

Friday, December 26, 2008

Paginated ObservableCollection

ObservableCollection class makes the collection binding very easy in Silverlight or WPF. This special collection is aware of the binding infrastructures and notify them whenever some changes happens to the collection.


I have often come across the requirement to have  pagination enabled on collections. When we bind a Collection with many items inside to an ItemsControl, the visual will be created for each and every items. But as we can see that there is no big significance in displaying all the data with a huge vertical scroll bar(or similar mechanism) in it. So pagination is the typical user experience strategy we use in this kind of scenarios. Architecturally we can achieve the pagination mainly in three different ways
  1. Making the UI Control or Panel aware of the virtualization, so that the visuals wont create at the time of binding. But as an on demand visual element creation. VirtualizingPanel concept in WPF is actually helps to achieve this idea. For more details about WPF virtualizaiton panels, go here and here - In terms of MVVM pattern this will be implemented at the View side.
  2. Making the collection aware of the pagination and that special collection always gives a subset of items to the UI for making the visuals. In terms of MVVM pattern this solution is implemented as ViewModel
  3. Last and most commonly used way in the web technology - Typical DB/Back end/Web service side pagination where the pagination is controlled in the query side. This is best way for handling huge data like what we see in most of the typical websites out there. Typically the implementation is part of the Model
Paginated ObservableCollection
   I have created a PaginatedObservableCollection as an experiment to achieve the UI vitalization based on the point (2) of the above list. And this special generic Collection is derived from ObservableCollection. This has mainly two properties 
  • PageSize - to store the number of items that can be shown in a single page 
  • CurrentPage - the page number of the current page which the UI is showing in a particulr time.
This collection internally keeps the original items in a private List and based on the above two properties the PaginatedObservableCollection returns a subset of the items inside the list.You can use this new Collection in the same way as you use any ObservableCollection and the two properties are also databindable to the UI to control the collection behaviors.

See a running demo in Silverlight here.


You can find the source code in CodePlex  - http://www.codeplex.com/PaginatedCollection , Feel free to give your suggestions comments to improve this. Source code include  WPF and Silverlight sample code


The current version of source code is not a thread proof implementation, but this can be taken as a starting point to make a working application to get this feature. There are some good articles about Observable collection in the multi-threading environment by Tamir and Beatriz

13 comments:

Kevin said...

Another link to multithreaded observable collection binding:

http://blog.quantumbitdesigns.com/2008/07/22/wpf-cross-thread-collection-binding-part-4-the-grand-solution/

金游世界视频棋牌游戏中心 said...

Good article, good things, good feelings, good BLOG!

DKS said...

hi, i dont get any link from where i can download source code. can you please tell me from where i can download code for paginated observablecollection?

Jobi Joy said...

hi DKS you can get the source from the Codeplex site, under the sourcecode tab.

DKS said...

hi jobi, thanks for reply. Can you please give me VB code for paginated observablecollection project. i have used C# code and converted in VB. But it is not working for me. Also tell me how can i convert below C# line into Vb.

PaginatedObservableCollection (DummyData) paginatedCollection = new PaginatedObservableCollection( DummyData)(3);

Jobi Joy said...

Dim paginatedCollection As New PaginatedObservableCollection(Of DummyData)(3)

You can use sites like http://www.developerfusion.com/tools/convert/csharp-to-vb/ to easily convert from C# to VB. Unfortunately I have not planned for a VB code in the near term but I would love to do that soon.

DKS said...

I have used same VB code but it shows error on (3) say "Too many arguments to 'Public Sub New()'."

Jobi Joy said...

3 is just optional for the collection so you don't need to put 3
But still I feel you forgot to put 'Of' keyword before DummyData.

DKS said...

No, i dont forgot to put Of. i have written below line.
Dim obsvCollT_Users As PaginatedObservableCollection(Of T_Users) = New PaginatedObservableCollection(Of T_Users)(3).
I have created datagrid which populates with DB data using ObservableCollection. but now i need to apply basic paging/sorting features. and i have found only one solution for pagin (paginated observablecollection). so please help me to solve this issue. i have used same VB code then also it is not working. I think something is off here. so please help me.

Jobi Joy said...

You dont need to put 3 there. It will work with out that.
Dim paginatedCollection As New PaginatedObservableCollection(Of DummyData)()

婷婷 said...

Your blog is wonderful, I like it very much, thank you!
By the way, do you like Burberry Polos, which are very chic, especially the Ralph Lauren Polo Shirts, I love them very much. I also like playing sports, it can keep healthy, what do you like to do?
We are the outlet of Wholesale Polo Shirt, Polo Ralph Lauren shirts on sale,these products are best-seller in our store cheap polo shirts Cheap Polo ShirtsToday is Christmas, and our products also have a corresponding discount activitiesWholesale Polo Shirts -50% OFF,cheap polo shirts Cheap Polo ShirtsSo if you love these, you should not miss our store, we can meet what you want, and you can find many surprise in our store

lex said...

great piece of code, almost exactly what i was looking for. the only problem I have is that i need to create pages according to data coming from the database. ie I have already created page numbers in my data, so rather than having a fixed number of records per page it will be variable. is there anyway of doing this with your code?
eitherway thanks again.

Jobi Joy said...

This ObservableCollection has a PageSize property, so it is totally variable records you can show per page.