DataBinding in WPF DataPager (SfDataPager)

27 Feb 202511 minutes to read

Data binding is the master feature of SfDataPager. SfDataPager is bound to an external data source to display the data.

Source and PagedSource

SfDataPager exposes the Source property, where you can pass your collection of data for Paging. SfDataPager automatically wrap the collection in the PagedCollectionView and exposes to the PagedSource property. You can pass the PagedSource property to any ItemsControl’s ItemsSource property.

The following code example explains how to use the Source and PagedSource property.

<Window.DataContext>
    <local:Viewmodel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <sfGrid:SfDataGrid AutoGenerateColumns="True" 
                       ItemsSource="{Binding ElementName=sfDataPager,Path=PagedSource}"/>
    <datapager:SfDataPager x:Name="sfDataPager" 
                           Grid.Row="1"
                           NumericButtonCount="10"
                           PageSize="16" 
                           Source="{Binding OrdersDetails}" />
</Grid>

The following screenshot displays the output of the above code.

PageIndex

Features_images1

SfDataPager exposes the PageIndex property. It contains the index of the currently selected page.You can use this property to set or get the current page of the SfDataPager.

Events

Event Parameters Description
PageIndexChanging OldPageIndex NewPageIndex Cancel Event is triggered when the current page index is changing. By using this event, you can cancel the page navigation operation by setting Cancel

__

to true.
PageIndexChanged OldPageIndex NewPageIndex Event is triggered after the current page index is changed.

How to bind the PageCollection to the other controls?

SfDataPager automatically wraps the collection in PagedCollectionView and exposes to the PagedSource property. You can pass the PagedSource property to any ItemsControl’s ItemsSource property. Here, the PagesSource property is binded to the ListBox.

The following code explains how to use Source and PagedSource property in ListBox.

<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ListBox ItemsSource="{Binding ElementName=sfDataPager,Path=PagedSource}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Data.OrderID}" Grid.Column="0"/>
                    <TextBlock Text="{Binding Data.CustomerName}" Grid.Column="1"/>
                    <TextBlock Text="{Binding Data.Country}" Grid.Column="2"/>
                    <TextBlock Text="{Binding Data.CustomerID}" Grid.Column="3"/>
                    <TextBlock Text="{Binding Data.ShipCity}" Grid.Column="4"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <datapager:SfDataPager x:Name="sfDataPager" 
                           Grid.Row="1"
                           NumericButtonCount="10"
                           PageSize="10" 
                           Source="{Binding OrdersDetails}" />
</Grid>

The following screenshot displays the output for ListView binded with PagedCollection.

Features_images2

On DemandPaging

In normal paging, the entire data collection is initially loaded into the SfDataPager control. However, the SfDataPager control allows you to load the data for the current page dynamically. To enable on demand paging, set UseOnDemandPaging to true.__

OnDemandPaging can be achieved by using the OnDemandLoading event and LoadDynamicItems method.

The OnDemandLoading event is triggered when the pager moves to the corresponding page. The OnDemandLoading event contains the following event arguments,

  • StartIndex: Corresponding page start index.
  • PageSize: Number of items to be load for that page.

In an OnDemandLoading event, you can use the LoadDynamicItems method to load the data for the corresponding page.

NOTE

In OnDemandPaging, you cannot assign a value for the Source property.

The following steps help you to achieve an OnDemandLoading with the SfDataPager control.

  1. Set the UseOnDemandPaging property to true.

  2. Set the PageCount value for the SfDataPager control.

    <Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <syncfusion:SfDataGrid x:Name="dataGrid"
                           AllowResizingColumns="True"
                           ColumnSizer="Star"
                           ItemsSource="{Binding Path=PagedSource,ElementName=sfDataPager}"/>
    <datapager:SfDataPager x:Name="sfDataPager" 
                           OnDemandLoading="OnDemandDataLoading" 
                           PageCount="50"
                           PageSize="16" 
                           UseOnDemandPaging="True" />
</Grid>

  3. Wire up the OnDemandLoading event of SfDataPager.

    void OnDemandLoading(object sender, OnDemandLoadingEventArgs args)
{
    AssociatedObject.sfDataPager.LoadDynamicItems(args.StartIndex,source.Skip(args.StartIndex).Take(args.PageSize));
}

The following screenshot displays the output for OnDemandPaging,

Features_images3

Page Size

SfDataPager splits the data into separate pages based on the PageSize. In order to specify the size of the page, you can use the PageSize property. By defaults, it is set to 0 and all the data is displayed in a single page.

The following code example explains how to use PageSize property in SfDataPager.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <syncfusion:SfDataGrid AutoGenerateColumns="True" 
                           ItemsSource="{Binding ElementName=sfDataPager,Path=PagedSource}"/>
    <datapager:SfDataPager x:Name="sfDataPager" 
						   Grid.Row="1"
						   NumericButtonCount="10"
						   PageSize="10" 
						   Source="{Binding OrdersDetails}" />
</Grid>

The following screenshot displays the output for PageSize set as 5.

Features_images4

How To

How to change the PageSize in Runtime

In general, the size of the page is defined in the PageSize property. In some cases, you may want to change it during the run time. The following code example explains how to change the size of the page during runtime for a ComboBox.

<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1" Grid.Row="1" Height="20" Margin="3,0" Orientation="Horizontal">
        <ComboBox Name="combobox"  SelectedIndex="0" ItemsSource="{Binding ComboBoxitem}" />
    </StackPanel>
    <sfgrid:SfDataGrid AutoGenerateColumns="True" 
                       ItemsSource="{Binding ElementName=sfDataPager,Path =PagedSource}"/>
    <datapager:SfDataPager x:Name="sfDataPager" 
                           AccentBackground="DodgerBlue"
                           NumericButtonCount="10"
                           Grid.Row="1"
                           PageSize="{Binding Path =SelectedValue,ElementName=combobox}"
                           Source="{Binding OrdersDetails}" />
</Grid>

The following screenshot displays the output for changing the PageSize value during runtime.

Features_images5