How to paginate an ObservableCollection?

I have a ListBox with way too many items in it and the UI is getting slower and slower (virtualization is on, etc). So I was thinking about displaying only the first 20 items and allow to user to navigate through the result set (i.e. ObservableCollection).

Does anybody know if a Pagination mechanism exist for the ObservableCollection? Does anybody has done that before?

Thanks!

Answers


This facility is not directly available in the base ObservableCollecton class. You can extend the ObservableCollection and create a custom Collection which does this. You need to hide the original Collection inside this new class and based on a FromIndex and ToIndex give dynamically add the range of items to the class. Override InsertItem and RemoveItem. I am giving a not-tested version bellow. But please take this as just pseudo code.

 //This class represents a single Page collection, but have the entire items available in the originalCollection
public class PaginatedObservableCollection : ObservableCollection<object>
{
    private ObservableCollection<object> originalCollection;

    public int CurrentPage { get; set; }
    public int CountPerPage { get; set; }

    protected override void InsertItem(int index, object item)
    {
        //Check if the Index is with in the current Page then add to the collection as bellow. And add to the originalCollection also
        base.InsertItem(index, item);
    }

    protected override void RemoveItem(int index)
    {
        //Check if the Index is with in the current Page range then remove from the collection as bellow. And remove from the originalCollection also
        base.RemoveItem(index);
    }
}

UPDATE: I have a blog post about this topic on here - http://jobijoy.blogspot.com/2008/12/paginated-observablecollection.html and the source code is uploaded to Codeplex.


Need Your Help

MySQL - Which Hash Algo should I use for this?

php mysql

I have a big rhyme database with 360000 words (entries). Every word has a category (for example: 'sheet' and 'meet' have the category 'eet'). A query to find suitable rhymes is somekind of slow on my

Table cell align content right using bootstrap

twitter-bootstrap twitter-bootstrap-3

In the table below, I have two rows. In the first row, second cell, I have two buttons. How can I get these buttons to be right aligned using Twitter Bootstrap The buttons should not stack on top o...