Custom DataPager With PageSize DropDown in Silverlight

• Download source code - 1.89 MB
• Download latest version of source code
• Live demo

Introduction

In real time applications, huge data display demands pagination with a DataPager, which offers navigation and paging for a data source. Pagination can be achieved using PagedCollectionView. If you are new to the DataPager control then I would recommend you go through this MSDN article and Kunal’s blog post.

Here in this post, we will customize the DataPager control to have a page size combo (or dropdown) which will have options to change the page size dynamically based on the data source. Let us see an ASP sample from Telerik, have a look at the demo here.

The Approach

Well to achieve the PageSize dropdown, we are going to apply a Style to the DataPager which in turn is going to include an additional dropdown control. This dropdown item source will be bind with the parent ancestor control which is the DataPager. The Convertor associated with the dropdown binding will have a small logic to get the list of page size values based on the DataPager ItemCount.

Lost in words … Follow the rest of the post.

Step by Step Implementation

Allow me to split our task to steps, basically:

• Create a Style with an additional dropdown/combo
• Assign DataBinding to the dropdown and Convertor
• Handle dropdown selection change event
• Implement the Style in the DataPager

Create a Style with Additional Dropdown/Combo

The best way to analyse a control and modify a style is to dissect the control within Blend. So let us open the DataPager control in Expression Blend and start modifying the template.

Blend shows the controls used to form a DataPager although we are not going to change the existing one. With the XAML view of the control template, let us add a dropdown and a TextBlock to the Style as our first change.

Assign Data Binding to the Dropdown and Convertor

The Dropdown/Combo mentioned in the Style is directly dependent on the DataPager. So we will use the same datasource used for the DataPager. But the ItemSource within the combobox must be a whole number depending on the default page size defined by the user. The logic here is to populate the dropdown with a convertor attached to the control. Let us have a look at the binding syntax of the dropdown:

The ItemSource of the combobox is assigned to the parent control and the PageCovertor is to return a numeric value collection based on the ItemSource count. The Convertor code to populate the dropdwon can be:

public class PageComboConvertor : IValueConverter
{
    // This converts the DateTime object to the string to display.
    public object Convert(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        //Set Default PageSize , The Page size
        //will be based on the default value
        int PageSizeVal=5;
 
        List<Int32> lstVal = new List<Int32>();
        //Get the DataPager as it is assigned in Binding
        DataPager dp = (DataPager)value;
 
        //Get Datapager ItemCount and Add to the List
        for (int count = 1; count <= (dp.ItemCount / PageSizeVal); count++)
        {
            lstVal.Add((PageSizeVal * count));
        }
        return lstVal;
    }
 
    // No need to implement converting back on a one-way binding
    public object ConvertBack(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Handle Dropdown Selection Change Event

As the PageSize of the DataPager should change on selection changed, we can attach an event handler directly to the combobox at the Style or if we want it as a user control, it can be retrieved when loading the control and can attach an event handler (check with my earlier post for retrieving a control). Here I am following the simple way of adding an event through a XAML style.

private void cmbPageSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    dpPager.PageSize = (int)((ComboBox)sender).SelectedValue;
}

Implement the Style in the DataPager

If you followed the above steps then next we can apply the Style to the DataPager control as shown below:

<sdk:DataPager Height="26"
                 Margin="12,393,12,0"
                 Name="dpPager"
                 PageSize="5"
                 VerticalAlignment="Top"
                 Style="{StaticResource DataPagerWithPageSize}"/>

And the result of the Style will be the modified version of the DataPager:

The sample project attached here contains a Sample of the DataPager with a DataGrid and a default page size of 5.

Online Demo and Download

• Online demo link: here.
• Download sample project: here.

Conclusion

Hope this post will help in understanding the styling concept. Stay tuned for some more cool posts on DataGrid in future. Let me know your thoughts and keep your questions coming.