Customizing DataPager With PageSize DropDown in Silverlight

In real time applications huge data display demands pagination with a DataPager , which offer navigation and paging to data source .Pagination can be achieved using PagedCollectionView.If you are new to DataPager control then i would recommend you to 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 the options to change the page size dynamically based on the data source.Lets see an ASP sample from Telerik , have a look at the demo Here.

The Overall Approach

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

Lost in words … Follow rest of the post

Step By Step Implementation

Allow me to split our task to steps , basically

Create a Style with additional Dropdown/Combo
Assign DataBinding to the DropDown and Convertor
Handle Dropdown selection change event
Implement the Style in DataPager

Create a Style with additional Dropdown/Combo

The Best way to analyse a control and modify a style is to dissect the control with in Blend.So lets open the Datapager control in Expression Blend and start modifying the Template.

The Blend shows the controls used to form a Datapager , Although we are not going to change any of the existing.With XAML view of the control template lets add a Dropdown and TexBlock to the style as our first change.

Assign Data Binding to the Dropdown and Convertor

The Dropdown/Combo mentioned in the style is directly depended on the DataPager .So the we will use the same datasource used for the Datapager .But the ItemSource with in the combobox must be a whole number depending upon the default page size defined by the user.The logic here to populate the Dropdown will be a convertor attached the control.Lets 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 Datpager should change on selection changed we can attach a event handler directly to the ComboBox at style or else if we want it as an user control it can be retrieved while loading of the control and can attach a event handler (Check with my earlier post for Retrieving a control ).Here i am following the simple way of adding event through XAML style.

1

2

3

4

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

Implement the Style in DataPager

If you followed above steps then , next we can apply the style to the Datapager control as shown bellow

1

2

3

4

5

6

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

The sample project attached here contains a sample of datapager with Datagrid and 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 post on datagrid in future.Let me know your thoughts and keep coming your questions . Smile

6 Comments

Join the conversation! Your thoughts help the community grow.

Manas Patnaik14y ago
:)
Prashant Chaudhary14y ago
Very well explained. Thanks for sharing it
Alok Pandey14y ago
Good Article, Manas. Thanks for sharing your thoughts.
Arjun Panwar14y ago
Thanks Mr. Manas for this implements.
Akash Ahlawat14y ago
Really a nice article with good presentation
Soft Corner14y ago
Very Nice Presentation