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 ,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | public class PageComboConvertor : IValueConverter
{
public object Convert( object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
int PageSizeVal=5;
List<Int32> lstVal = new List<Int32>();
DataPager dp = (DataPager)value;
for ( int count = 1; count <= (dp.ItemCount / PageSizeVal); count++)
{
lstVal.Add((PageSizeVal * count));
}
return lstVal;
}
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 .