Click here to Skip to main content
Click here to Skip to main content

Paginating Records in Silverlight DataGrid using PagedCollectionView

, 2 Jan 2011 CPOL
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.

Introduction

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.

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

Background

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 PagedCollectionView which we used to store our records in our ViewModel.

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

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

image

Let’s start with implementation to add the DataPager in 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:

image

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

Set the PageSize as “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:

image

Setting FirstLastPreviousNextNumeric display 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.

image

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

image

Similarly setting FirstLastPreviousNext option 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.

image

If you set Numeric as 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.

image

PreviousNext display 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.

image

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.

image

From the above explanation, I think you are now comfortable with the DisplayMode option 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.

image

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.

image

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 PageSize of 3).

image

Now do one thing. Change the PageSize to 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.

image

Here is the full XAML code for your reference:

<UserControl
    xmlns=" height="20" 
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:viewmodels="clr-namespace:DataGridDemo1.ViewModels" 
    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 PagedCollectionView from 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.

History

  • 2nd January, 2011: Initial post

License

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

Share

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: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberprasad024-Jan-11 5:56 
GeneralRe: My vote of 5 PinmvpKunal_Chowdhury4-Jan-11 8:52 

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.141216.1 | Last Updated 2 Jan 2011
Article Copyright 2011 by Kunal Chowdhury (@kunal2383)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid