Click here to Skip to main content
Click here to Skip to main content
Go to top

Custom DataPager With PageSize DropDown in Silverlight

, 30 Nov 2011
Rate this:
Please Sign up or sign in to vote.
Customizing DataPager with PageSize dropdown in Silverlight.

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.

Datapager With Pagesize DropDown Silverlight

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.

Datapager With Pagesize DropDown Silverlight

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.

Datapager With Pagesize DropDown Silverlight

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:

Datapager With Pagesize DropDown Silverlight

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.

Datapager With Pagesize DropDown Silverlight

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:

Datapager With Pagesize DropDown Silverlight

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

Datapager With Pagesize DropDown Silverlight

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.

License

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

Share

About the Author

Manas_Patnaik
Software Developer (Senior) Infosys
India India
Nothing special .. I like challenges and love my critics.
 
Associate Consultant | Microsoft | Bangalore | India

Blog : http://manaspatnaik.com/blog

Twitter@manas_patnaik
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 1 PinmemberMember 80072796-Dec-11 20:30 
GeneralMy vote of 5 PinmemberKanasz Robert1-Dec-11 2:37 
Hi, good job. You've got my 5.
GeneralRe: My vote of 5 PinmemberManas_Patnaik1-Dec-11 8:23 
GeneralMy vote of 5 PinmemberSachin_coder30-Nov-11 21:13 
GeneralRe: My vote of 5 PinmemberManas_Patnaik1-Dec-11 8:24 

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 | Mobile
Web01 | 2.8.140916.1 | Last Updated 1 Dec 2011
Article Copyright 2011 by Manas_Patnaik
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid