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.

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

Demo

Let’s have a demo of the implemented application here:

More on DisplayMode

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

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.

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

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

PreviousNext display mode will give you 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 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 no. 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 to 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.

Here is the full XAML code for your reference:

<UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:viewModels="clr-namespace:DataGridDemo1.ViewModels"

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 

    x:Class="DataGridDemo1.Views.MainView">

    <UserControl.Resources>

        <viewModels:MainViewModel x:Key="MainViewModel"/>

    </UserControl.Resources>

    <StackPanel x:Name="LayoutRoot" Background="White"

                DataContext="{StaticResource MainViewModel}">

        <StackPanel Orientation="Horizontal">

            <ComboBox Width="200" Height="20" Margin="10"

                      HorizontalAlignment="Left" 

                      SelectionChanged="ComboBox_SelectionChanged">

                <ComboBoxItem Content="City"/>

                <ComboBoxItem Content="State"/>

                <ComboBoxItem Content="Department"/>

            </ComboBox>

            <TextBlock Text="Filter Records by: " Height="20"/>

            <TextBox Width="150" Height="25" TextChanged="TextBox_TextChanged"/>

        </StackPanel>

        <sdk:DataGrid 

            IsReadOnly="True" Margin="10" Height="200" ItemsSource="{Binding Employees}"/>

        <sdk:DataPager x:Name="pagerEmployee" 

                       DisplayMode="FirstLastPreviousNextNumeric" PageSize="3"

                       NumericButtonCount="3" Height="24" Margin="10,0" 

                       HorizontalAlignment="Stretch" VerticalAlignment="Center" 

                       Source="{Binding Employees}" />

    </StackPanel>

</UserControl>

Download

• Paginating Records in Silverlight DataGrid using PagedCollectionView (Source – 27 KB)

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 you 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. Appreciate any kind of feedback, 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.