Paginating Records in Silverlight DataGrid using PagedCollectionView

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.

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:

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:

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:

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

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

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.

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.

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.

Comments and Discussions

I have silverlight application that contain images from database and also having paging using datapager control. Now my questionis that i want to move image from button like next and previous. these button is sepprate from datapager when next button is clicked, page no is also increase from datapager pagging.

This is great! As I am new to Silverlight, this answered my question on how to get my datagrid to only show 10 at a time!
However, I do have a question. I am loading my datagrid from a database query. The itemssource is loaded in the vb codebehind. How do I get the DataPager to bind to that code?

You may add my name for Chennai city in data which you are loading in grid.

BTW, recently I launched a new Silverlight site: http://www.silverlight-zone.com[^] (as discussed in CP meetup) where I publish latest Silverlight related articles as daily news. Have a look into that. You may like it.