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
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
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
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
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
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
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:
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
public object Convert(object value, Type targetType, object parameter,
List<Int32> lstVal = new List<Int32>();
DataPager dp = (DataPager)value;
for (int count = 1; count <= (dp.ItemCount / PageSizeVal); count++)
lstVal.Add((PageSizeVal * count));
public object ConvertBack(object value, Type targetType,
object parameter, System.Globalization.CultureInfo culture)
throw new NotImplementedException();
Handle Dropdown Selection Change Event
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:
And the result of the Style will be the modified version of the
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.
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.