Click here to Skip to main content
15,867,704 members
Articles / Web Development

Paginating Records in Silverlight DataGrid using PagedCollectionView

Rate me:
Please Sign up or sign in to vote.
4.96/5 (15 votes)
2 Jan 2011CPOL5 min read 65.4K   1K   19   21
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:

XML
<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)


Written By
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead 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 app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
QuestionHow to create custom pagging in listbox with Datapager control? Pin
r.rakeshsingh2-Oct-12 3:13
r.rakeshsingh2-Oct-12 3:13 
Hello

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.

Please help me to complete this task.

Thanks
Rakesh Singh

GeneralAwesome! Pin
AaronBastian8-Feb-11 6:27
AaronBastian8-Feb-11 6:27 
GeneralRe: Awesome! Pin
Kunal Chowdhury «IN»8-Feb-11 6:30
professionalKunal Chowdhury «IN»8-Feb-11 6:30 
GeneralMy vote of 5 Pin
Durgaprasad Budhwani12-Jan-11 1:30
Durgaprasad Budhwani12-Jan-11 1:30 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»12-Jan-11 15:16
professionalKunal Chowdhury «IN»12-Jan-11 15:16 
GeneralMy vote of 5 Pin
prasad024-Jan-11 4:56
prasad024-Jan-11 4:56 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»4-Jan-11 7:52
professionalKunal Chowdhury «IN»4-Jan-11 7:52 
GeneralMy vote of 5 Pin
Mamta D3-Jan-11 17:57
Mamta D3-Jan-11 17:57 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»4-Jan-11 1:55
professionalKunal Chowdhury «IN»4-Jan-11 1:55 
GeneralMy vote of 5 Pin
RaviRanjanKr2-Jan-11 18:41
professionalRaviRanjanKr2-Jan-11 18:41 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»2-Jan-11 19:53
professionalKunal Chowdhury «IN»2-Jan-11 19:53 
GeneralMy vote of 5 Pin
defwebserver2-Jan-11 16:54
defwebserver2-Jan-11 16:54 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»2-Jan-11 19:53
professionalKunal Chowdhury «IN»2-Jan-11 19:53 
GeneralMy vote of 5 Pin
Marcelo Ricardo de Oliveira2-Jan-11 5:04
mvaMarcelo Ricardo de Oliveira2-Jan-11 5:04 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»2-Jan-11 5:55
professionalKunal Chowdhury «IN»2-Jan-11 5:55 
GeneralGood one Pin
thatraja2-Jan-11 1:37
professionalthatraja2-Jan-11 1:37 
GeneralRe: Good one Pin
Kunal Chowdhury «IN»2-Jan-11 1:42
professionalKunal Chowdhury «IN»2-Jan-11 1:42 
GeneralGood work Pin
Abhijit Jana2-Jan-11 0:42
professionalAbhijit Jana2-Jan-11 0:42 
GeneralRe: Good work Pin
Kunal Chowdhury «IN»2-Jan-11 0:53
professionalKunal Chowdhury «IN»2-Jan-11 0:53 
GeneralMy vote of 5 Pin
Abhishek Sur2-Jan-11 0:23
professionalAbhishek Sur2-Jan-11 0:23 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»2-Jan-11 0:52
professionalKunal Chowdhury «IN»2-Jan-11 0:52 

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

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