Click here to Skip to main content
11,648,785 members (81,989 online)
Click here to Skip to main content

Paginating Records in Silverlight DataGrid using PagedCollectionView

, 2 Jan 2011 CPOL 35.6K 911 19
Rate this:
Please Sign up or sign in to vote.
Do you have a huge collection of data inside your DataGrid and want to integrate Pagination to show records page by page and don’t know how to do? Then this article will help you to understand the same.


Do you have a huge collection of data inside your DataGridand want to integrate Pagination to show records page by page and don’t know how to do? Then this article will help you to understand the same.

After reading this article, you will be able to integrate pagination to your DataGridto do the paging automatically by using a simple trick. Read the complete article to know about it. Feedback/suggestions are always appreciated.


Hope you already read the previous two articles: “Grouping Records in Silverlight DataGrid using PagedCollectionView” and “Filtering Records in Silverlight DataGrid using PagedCollectionView” and if not, read those two articles first to start with this one. Because, you will get to know about the PagedCollectionViewwhich we used to store our records in our ViewModel.

Here in this article, we will discuss how to integrate the DataPagerto paginate records of DataGrid. We will discuss various options to customize the DataPagerlook to show various pages.

We are going to create the below paging with our records:


Let’s start with implementation to add the DataPagerin our existing XAML that we used in previous two articles.

Adding DataPager

Open the XAML page where we added our DataGrid. Just add the below code just below the DataGrid:


You need to set the DisplayModeof the pager. There are total 6 DisplayModenamed “FirstLastPreviousNextNumeric”, “FirstLastNumeric”, “FirstLastPreviousNext”, “Numeric”, “PreviousNext” and “PreviousNextNumeric”. Select any one of them.

Set the PageSizeas “3”. This will only show 3 records in each page. If you change it to n (n defines any positive integer value), it will show only n records per page inside your data grid.

Lastly, set the Source to the collection, which you want to paginate. In our case, it is the “Employees” property placed inside the ViewModel. This is nothing but our PagedCollectionView.

That’s all about changing the XAML. You don’t have to write/modify any more code. Run your application. You will see it in action.

More on DisplayMode

As we already mentioned, there are 6 types of Display Mode in DataPager. Let’s start discussing each one of them. Here are the individual screenshots of different types of DisplayMode:


Setting FirstLastPreviousNextNumericdisplay mode will give you the option to navigate to first page, previous page, next page and last page. It will also show the number of the pages in the pager. You can click on them to navigate to that particular page.


Setting FirstLastNumericoption will give you navigation to first page, last page and individual numbered page.


Similarly setting FirstLastPreviousNextoption will give you the choice to navigate to first page, previous page, next page and last page. Like other two options, there will not be any paged numbers there but will be option to enter the desired page number.


If you set Numericas the Display Mode, you will be able to see only the page numbers in the screen. There will be no option to navigate to first page, previous page, next page or last page. You have to click on the page number to navigate to that particular page.


PreviousNextdisplay mode will give you the option to navigate to the previous and next page. No clickable page number will be available here, but you will be able to enter the desired number of page to move directly to it. This option will show Page x of y where x is the current page and y is the total number of pages.


The last choice is the PreviousNextNumeric. Here, you will be able to navigate to previous page, next page and also there will be an option to click on any desired page number.


From the above explanation, I think you are now comfortable with the DisplayModeoption in DataPager. The images added there will give you better visibility to the option.

If you run the application, you will be able to navigate between each page either by clicking last page, previous page, next page or last page. If options are set, you will be able to click on the desired page number to navigate directly to the page.

More on PageSize

Setting PageSize=”3”will set the max no. of records for each page. If you navigate through each page, you will see all the pages have equal number of records (in our case, it is 3). The last page may have less than or equal to the number of PageSize. In our example, the last page will have only 2 records.


Worried about the pagination logic in Grouping and/or Filtering? No need to worry about that. Let’s do a grouping on the records. Chose any grouping option from the drop down. You will see that, here also the records are grouped based on the PageSize. Navigate to the other pages, you will see the same no. of records in each page.


Let’s do a filtering on the records. Woo!!! That is also working. You will see that the page size is fixed for Max no. of 3 records (3 in our example, because we mentioned the PageSizeof 3).


Now do one thing. Change the PageSizeto 4 and you will see the no. of records in each page has been changed to the same, i.e. 4. You will also notice that the no. of pages, all reduced to 2. This all depends on total no. of records and the PageSize.


Here is the full XAML code for your reference:

    xmlns=" height="20" 
    x:class="DataGridDemo1.Views.MainView" x:key="MainViewModel" 
    background="White" datacontext="{StaticResource MainViewModel}" 
    orientation="Horizontal" selectionchanged="ComboBox_SelectionChanged" 
    content="City" text="Filter Records by: " textchanged="TextBox_TextChanged" 
    isreadonly="True" itemssource="{Binding Employees}" x:name="LayoutRoot" 
    displaymode="FirstLastPreviousNextNumeric" pagesize="3" 
    numericbuttoncount="3" margin="10" horizontalalignment="Left" 
    verticalalignment="Center" source="{Binding Employees}">

End Note

Hope this article helped you to understand the pagination magic with DataGrid. Next time if you want to use DataPager, this article will help you to achieve the functionality very easily. The sample application code is also attached with this article. You will be able to freely download it. You can notice that, adding only a single XAML line to your page did all the tricks for you providing you implemented the basic property with the PagedCollectionViewfrom the beginning. Hope you really enjoyed reading this article. I appreciate any kind of feedback and/or suggestion. If you have any topic to discuss on the same, please drop a line here. I will try my best to answer your queries.


  • 2nd January, 2011: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kunal Chowdhury (@kunal2383)
Team Leader
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Technical Blog:
Twitter :

You may also be interested in...

Comments and Discussions

GeneralGood one Pin
thatraja2-Jan-11 1:37
memberthatraja2-Jan-11 1:37 
GeneralRe: Good one Pin
Kunal_Chowdhury2-Jan-11 1:42
mentorKunal_Chowdhury2-Jan-11 1:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150804.4 | Last Updated 2 Jan 2011
Article Copyright 2011 by Kunal Chowdhury (@kunal2383)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid