UXDataPager is a flexible, MVVM-ready data paging control that can be used to provide paging functionality to UXGridView and any ItemControls such as UXListBox. UXDataPager fully supports MVVM pattern and server query mode through the use of QueryDescriptor.

Using UXDataPager

The UXDataPager control provides a configurable user interface for paging through a data collection. Similar to the other ClientUI data controls, UXDataPager supports both server side and client side operation.

Client Data Operation

Client data operation means that the data operation, in this case data paging, is executed in the client side against the data source provided to the UXDataPager. To use this operation, you set the QueryOperation property to Client.

You typically use a collection that implements IPagedCollectionView as the data source. The IPagedCollectionView provides paging support to the underlying collection. You can bind the UXDataPager to any IEnumerable collection; however, the UXDataPager will behave as if the data is all on a single page. To provide paging functionality for an IEnumerable collection, you can wrap the collection in a PagedCollectionView instance.

To learn how to implement data paging using UXDataPager, see How-to: Implement Data Paging using UXDataPager.

Server Data Operation

Server data operation means that data operation in this case data paging is processed in the server. This means that UXDataPager does not handle the paging operation by its own. Instead, UXDataPager provides the query information allowing you to process it further.

To use this mode, you set the QueryOperation property to Server. When this mode is selected, UXDataPager will not attempt to perform the data operation on the given data source. Instead, it will store and distribute the query information on certain properties such as PageIndex, PageSize and TotalItemCount which are defined in the PageDescriptor property. When one of these properties change, the QueryChanged event of the associated QueryDescriptor will be raised. This allows you to streamline the query processing in a centralized function, which is one of the strong benefits of QueryDescriptor. For more information about QueryDescriptor, see QueryDescriptor Overview.

To learn how to implement data paging using PageDescriptor and UXDataPager, see How-to: Implement Data Paging using PageDescriptor and UXDataPager.

Customizing UXDataPager Appearance

You can customize the appearance of the UXDataPager by setting the DisplayMode property. If you use a DisplayMode that displays numeric buttons, you can change the number of buttons displayed by setting the NumericButtonCount property. You can also set the AutoEllipsis property to true to automatically display an ellipsis indicator when the control has more pages to show. You can also modify the appearance of the numeric button by specifying a custom NumericButtonStyle.

The following illustration shows the UXDataPager configured to use different display mode.

    <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}"
                        Margin="8" DisplayMode="FirstLastNumeric"/>
    <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}"
                        Margin="8" DisplayMode="FirstLastPreviousNext"/>
    <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}"
                        Margin="8" DisplayMode="FirstLastPreviousNextNumeric"/>
    <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}" NumericButtonCount="3" AutoEllipsis="True"
                        Margin="8" DisplayMode="FirstLastPreviousNextNumeric"/>
    <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}" NumericButtonCount="2"
                        Margin="8" DisplayMode="FirstLastPreviousNextNumeric"/>
    <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}"
                        Margin="8" DisplayMode="Numeric"/>
    <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}"
                        Margin="8" DisplayMode="PreviousNext"/>
    <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}"
                        Margin="8" DisplayMode="PreviousNextNumeric"/>

Localizing UXDataPager Textual Content

You can easily localize the textual content of UXDataPager by setting the ResourceOverride property to a UXDataPagerResource instance containing the customized textual content.

The default textual content are listed in the following table.

The following examples show how to localize the textual content of a UXDataPager.

    <StackPanel Intersoft:DockPanel.Dock="Bottom">
        <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}"
                                Margin="8" DisplayMode="FirstLastPreviousNext">
            <Intersoft:UXDataPager.ResourceOverride>
                <Intersoft:UXDataPagerResource Prefix_TotalPageCountKnown="Pagina" Prefix_TotalPageCountUnknown="Pagina" Suffix_TotalPageCountKnown="of {0}" Suffix_TotalPageCountUnknown=""/>
            </Intersoft:UXDataPager.ResourceOverride>
        </Intersoft:UXDataPager>
        <Intersoft:UXDataPager PageSize="20" QueryOperation="Client" Source="{Binding Customers}" NumericButtonCount="3" AutoEllipsis="True"
                            Margin="8" DisplayMode="FirstLastPreviousNextNumeric">
            <Intersoft:UXDataPager.ResourceOverride>
                <Intersoft:UXDataPagerResource AutoEllipsisString=",,,"/>
            </Intersoft:UXDataPager.ResourceOverride>
        </Intersoft:UXDataPager>
    </StackPanel>

For more information about ClientUI localization framework, see Localization Overview.