New to Telerik UI for WPF? Start a free 30-day trial
Change PageSize Dynamically
Updated on Sep 15, 2025
Generally, the page size of a RadDataPager can be set via the corresponding PageSize property. However, in some cases you may require it to be changed dynamically during runtime.
So, if you want to use a RadComboBox, for example, for changing the size and you want it defined in the template of the RadDataPager, you need to follow a few steps:
- Define an IValueConverter responsible for adding items in the RadComboBox depending on the number of data items in RadGridView:
Example 1: The IValueConverter responsible for generating the list of page sizes
C#
public class CountConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var itemCount = (int)value;
List<int> result = new List<int>();
for (int i = 1; i < itemCount; i++)
{
if (i % 5 == 0)
{
result.Add(i);
}
}
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}- Predefine the template of the DataPagerPresenter control and bind the ItemsSource of the RadComboBox to the ItemCount property of the RadDataPager:
Example 2: Modify the control template of the DataPagerPresenter
XAML
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/System.Windows.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Data.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
<ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>
</ResourceDictionary.MergedDictionaries>
<local:CountConverter x:Key="countConverter"/>
<ControlTemplate x:Key="DataPagerPresenterTemplate" TargetType="dataPager:DataPagerPresenter">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<telerik:RadButton
Name="MoveToFirstPageButton"
Visibility="{Binding PagerControlsVisibility.MoveToFirstPageControlVisibility,RelativeSource={RelativeSource TemplatedParent}}"
Width="18"
Height="18"
Margin="2"
Command="{x:Static telerik:RadDataPagerCommands.MoveToFirstPage}">
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{StaticResource RadPager_Indicator}" VerticalAlignment="Center" HorizontalAlignment="Center" Width="1" Height="7"/>
<Path
Fill="{StaticResource RadPager_Indicator}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Data="M0,0 L3.5,3.5 0,7 Z"
Width="4"
Height="7"
RenderTransformOrigin="0.5, 0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</StackPanel>
</telerik:RadButton>
<telerik:RadButton
Name="MoveToPreviousPageButton"
Visibility="{Binding PagerControlsVisibility.MoveToPreviousPageControlVisibility,RelativeSource={RelativeSource TemplatedParent}}"
Width="18"
Height="18"
Margin="2"
Command="{x:Static telerik:RadDataPagerCommands.MoveToPreviousPage}">
<Path
Fill="{StaticResource RadPager_Indicator}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Data="M0,0 L3.5,3.5 0,7 Z"
Width="4"
Height="7"
RenderTransformOrigin="0.5, 0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</telerik:RadButton>
<Border
BorderThickness="1 0 0 0"
Background="{StaticResource RadPager_NumericPresenter_Background}"
BorderBrush="{StaticResource RadPager_NumericPresenter_Border}"
Height="20"
VerticalAlignment="Center"
Visibility="{Binding PagerControlsVisibility.NumericElementsControlVisibility,RelativeSource={RelativeSource TemplatedParent}}">
<dataPager:NumericElementsPresenter
NumericButtonStyle="{TemplateBinding NumericButtonStyle}"
AutoEllipsisMode="{TemplateBinding AutoEllipsisMode}"
PageIndex="{TemplateBinding PageIndex}"
PageCount="{TemplateBinding PageCount}"
NumericButtonCount="{TemplateBinding NumericButtonCount}"/>
</Border>
<telerik:RadButton
Name="MoveToNextPageButton"
Visibility="{Binding PagerControlsVisibility.MoveToNextPageControlVisibility,RelativeSource={RelativeSource TemplatedParent}}"
Width="18"
Height="18"
Margin="2"
Command="{x:Static telerik:RadDataPagerCommands.MoveToNextPage}">
<Path Fill="{StaticResource RadPager_Indicator}" VerticalAlignment="Center" HorizontalAlignment="Center" Data="M0,0 L3.5,3.5 0,7 Z" Width="4" Height="7"/>
</telerik:RadButton>
<telerik:RadButton
Name="MoveToLastPageButton"
Visibility="{Binding PagerControlsVisibility.MoveToLastPageControlVisibility,RelativeSource={RelativeSource TemplatedParent}}"
Width="18"
Height="18"
Margin="2"
Command="{x:Static telerik:RadDataPagerCommands.MoveToLastPage}">
<StackPanel Orientation="Horizontal">
<Path Fill="{StaticResource RadPager_Indicator}" VerticalAlignment="Center" HorizontalAlignment="Center" Data="M0,0 L3.5,3.5 0,7 Z" Width="4" Height="7"/>
<Rectangle Fill="{StaticResource RadPager_Indicator}" VerticalAlignment="Center" HorizontalAlignment="Center" Width="1" Height="7"/>
</StackPanel>
</telerik:RadButton>
</StackPanel>
<StackPanel
Orientation="Horizontal"
Grid.Column="1"
Visibility="{Binding PagerControlsVisibility.TextControlVisibility,RelativeSource={RelativeSource TemplatedParent}}"
Margin="5 0">
<!-- This ComboBox is bound to the ItemCount property of the parent RadDataPager -->
<telerik:RadComboBox ItemsSource="{Binding ItemCount, RelativeSource={RelativeSource AncestorType=telerik:RadDataPager}, Converter={StaticResource countConverter}}" SelectedValue="{Binding PageSize, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" x:Name="radComboBox" />
<Border HorizontalAlignment="Left" Margin="5 0 0 0" Width="1" Background="{StaticResource RadPager_Separator1}" VerticalAlignment="Center" Height="18"/>
<Border HorizontalAlignment="Left" Margin="0 0 10 0" Width="1" Background="{StaticResource RadPager_Separator2}" VerticalAlignment="Center" Height="18"/>
<TextBlock telerik:LocalizationManager.ResourceKey="RadDataPagerPage" VerticalAlignment="Center" Margin="2 0"/>
<dataPager:DataPagerTextBox
Width="48"
Height="22"
Margin="2 0"
VerticalContentAlignment="Center"
VerticalAlignment="Center"
PageIndex="{TemplateBinding PageIndex}"
Command="{x:Static telerik:RadDataPagerCommands.MoveToPage}"/>
<TextBlock telerik:LocalizationManager.ResourceKey="RadDataPagerOf" VerticalAlignment="Center" Margin="2 0"/>
<TextBlock Text="{Binding PageCount, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center" Margin="2 0"/>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
<Style BasedOn="{StaticResource DataPagerPresenterStyle}" TargetType="dataPager:DataPagerPresenter">
<Setter Property="Template" Value="{StaticResource DataPagerPresenterTemplate}"/>
</Style>
</ResourceDictionary>
</Application.Resources>- Define the RadDataPager in XAML if you have not done so already:
Example 3: Define the RadDataPager
XAML
<Grid x:Name="LayoutRoot" >
<Grid.RowDefinitions>
<RowDefinition Height="\*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<telerik:RadGridView x:Name="grid" ColumnWidth="\*" ItemsSource="{Binding Employees}" />
<telerik:RadDataPager Grid.Row="1" Source="{Binding Items, ElementName=grid}" PageSize="10"
IsTotalItemCountFixed="True" />
</Grid>Once you created all the necessary elements, your application should be displayed as follows:
Figure 1: RadDataPager with dynamic PageSize
You can download a runnable project on the previous example from our online SDK repository here.
You can also check the SDK Samples Browser which provides a more convenient approach in exploring and executing the examples in the Telerik xaml-sdk repository.