Customizing Appearance

RadDataPager provides few properties that allows you to customize the appearance of its elements.

Customizing the Numeric Buttons

The numeric buttons of the DataPager components can be customized via the NumericButtonStyle property. The property expects a Style object with its TargetType set to RadRadioButton.

Setting NumericButtonStyle

<telerik:RadDataPager DisplayMode="All">           
    <telerik:RadDataPager.NumericButtonStyle> 
        <Style TargetType="telerik:RadRadioButton"> 
            <Setter Property="Padding" Value="12 5" /> 
            <Setter Property="Margin" Value="1 2" /> 
            <Setter Property="Background" Value="#F56147" />                     
        </Style> 
    </telerik:RadDataPager.NumericButtonStyle> 
</telerik:RadDataPager> 

The data context passed to the button is an object of type PageViewModel. The IsCurrent property of the PageViewModel can be used to determine if button is selected (the current page button).

Customizing the TextBox

The text area that allows you to enter the page index can be customized via the TextBoxStyle property. The property expects a Style object with its TargetType set to TextBox.

Setting the TextBoxStyle

<telerik:RadDataPager DisplayMode="All">           
    <telerik:RadDataPager.TextBoxStyle> 
        <Style TargetType="TextBox"> 
            <Setter Property="Width" Value="50" />                     
            <Setter Property="Background" Value="#FFE680" /> 
            <Setter Property="TextAlignment" Value="Right" /> 
        </Style> 
    </telerik:RadDataPager.TextBoxStyle> 
</telerik:RadDataPager>