Silverlight 4.0: Paging Through Data using DomainDataSource

To make this article simple, I managed to create a simple Silverlight 4.0 application which consumes a WCF RIA Service created using WCF RIA Service Library. If you are not familiar with developing applications using the WCF RIA Service Library and Silverlight 4.0, check out a beginner's article.

If you are unfamiliar with "DomainDataSource," I strongly recommend you go through my previous articles published at http://www.aspfree.com/cp/bio/Jagadish-Chatarji

The entire source code for this article is available in the form of a free downloadable zip file. The solution was developed using Microsoft Visual Studio 2010 Ultimate Edition with Microsoft Silverlight 4.0 on Windows 7 Ultimate edition.  I didn't really test it in any other environment. I request that you post in the discussion area if you have any problems with execution.

Paging data using DataPager and DomainDataSource: design

In my previous articles, I explained the importance of DomainDataSource and how we can query, sort, group, filter and navigate data using the same in a Silverlight 4.0 application. In this section, we will focus on paging data using DataPager together with DomainDataSource. 

Let us start with an example:

<UserControl x:Class="SLBusinessAppWithRiaLib.DdsPaging"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.
DomainServices"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:BusinessLib.Web;assembly=BusinessLib"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" Width="500" Height="500">

    <UserControl.Resources>
        <riaControls:DomainDataSource x:Name="EmpDomDataSource"
                                      PageSize="5"
                                      LoadSize="5"
                                      QueryName="GetEmps"
                                      AutoLoad="True">
            <riaControls:DomainDataSource.DomainContext>
                <local:EmpMgrDomainSvc></local:EmpMgrDomainSvc>
            </riaControls:DomainDataSource.DomainContext>
            <riaControls:DomainDataSource.SortDescriptors>
                <riaControls:SortDescriptor PropertyPath="empno" Direction="Ascending"></riaControls:SortDescriptor>
            </riaControls:DomainDataSource.SortDescriptors>
        </riaControls:DomainDataSource>
    </UserControl.Resources>
   
    <Grid x:Name="LayoutRoot" Background="White">
     <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
     </Grid.RowDefinitions>

        <sdk:DataPager Source="{Binding Data, ElementName=EmpDomDataSource}"></sdk:DataPager>
        <sdk:DataGrid Grid.Row="1"
            x:Name="dgEmp"
            Margin="8" MinHeight="200" IsReadOnly="True"
            AutoGenerateColumns="True"
            ItemsSource="{Binding Data, ElementName=EmpDomDataSource}" />

    </Grid>
</UserControl>

The next section explains above code.  The design from the above code would look similar to the following:

Paging data using DataPager and DomainDataSource: design explanation

This section explains the code in the previous section.  We shall start with the following:

    <Grid x:Name="LayoutRoot" Background="White">
     <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
     </Grid.RowDefinitions>

The above creates a grid layout with two rows. I would like to reserve the first row for the pager (I will explain this in the next paragraph) and the second for data grid. Proceeding further, we have the following:

<sdk:DataPager Source="{Binding Data, ElementName=EmpDomDataSource}"></sdk:DataPager>

The above creates a control for paging through data, and it is bound to a DomainDataSource named  "EmpDomDataSource."  It looks like the following:

Proceeding further down, we have the following:

        <sdk:DataGrid Grid.Row="1"
            x:Name="dgEmp"
            Margin="8" MinHeight="200" IsReadOnly="True"
            AutoGenerateColumns="True"
            ItemsSource="{Binding Data, ElementName=EmpDomDataSource}" />

The above creates a data grid which binds to the same DomainDatasource as the DataPager, explained above.

Finally, the DomainDataSource named "EmpDomDataSource" is defined as shown below:

        <riaControls:DomainDataSource x:Name="EmpDomDataSource"
                                      PageSize="5"
                                      LoadSize="5"
                                      QueryName="GetEmps"
                                      AutoLoad="True">
            <riaControls:DomainDataSource.DomainContext>
                <local:EmpMgrDomainSvc></local:EmpMgrDomainSvc>
            </riaControls:DomainDataSource.DomainContext>
            <riaControls:DomainDataSource.SortDescriptors>
                <riaControls:SortDescriptor PropertyPath="empno" Direction="Ascending"></riaControls:SortDescriptor>
            </riaControls:DomainDataSource.SortDescriptors>
        </riaControls:DomainDataSource>

The above snippet covers the following:

• DomainDataSource pulls from WCF RIA using a query named "GetEmps."
  
• It retrieves five entities at a time from the database (LoadSize is set to 5).
  
• For pagination, it gives only 5 entities at a time (PageSize is set to 5).
  
• We can even load more data from the database at once, and limit the PageSize to the minimum.
  
• For pagination, we would need to sort at least one column.
  
• Currently, we sort our entities based on the "empno" field, and the sort direction is "Ascending."

Once we execute the form, the output would look similar to the following:

Paging data through DomainDataSource and without using DataPager: design

In previous sections, we have seen how to paginate data using DataPager together with DomainDataSource. In this section, we are going to achieve the same, but without using DataPager.

Let us start with a new form, as follows:

<UserControl x:Class="SLBusinessAppWithRiaLib.DdsPagingCodeBehind"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.
DomainServices"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:BusinessLib.Web;assembly=BusinessLib"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" Width="500" Height="500">

    <UserControl.Resources>
        <riaControls:DomainDataSource x:Name="EmpDomDataSource"
                                      PageSize="4"
                                      LoadSize="4"
                                      QueryName="GetEmps"
                                      AutoLoad="True">
            <riaControls:DomainDataSource.DomainContext>
                <local:EmpMgrDomainSvc></local:EmpMgrDomainSvc>
            </riaControls:DomainDataSource.DomainContext>
            <riaControls:DomainDataSource.SortDescriptors>
                <riaControls:SortDescriptor PropertyPath="empno" Direction="Ascending"></riaControls:SortDescriptor>
            </riaControls:DomainDataSource.SortDescriptors>
        </riaControls:DomainDataSource>
    </UserControl.Resources>
   
    <Grid x:Name="LayoutRoot" Background="White">
     <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
     </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Margin="8" >
            <Button x:Name="btnFirstPage" Content="&lt;&lt;" Margin="5, 0, 0, 0" />
            <Button x:Name="btnPreviousPage" Content="&lt;" Margin="5, 0, 0, 0" />
            <Button x:Name="btnNextPage" Content="&gt;" Margin="5, 0, 0, 0" />
            <Button x:Name="btnLastPage" Content="&gt;&gt;" Margin="5, 0, 0, 0" />
        </StackPanel>

        <sdk:DataGrid Grid.Row="1"
            x:Name="dgEmp"
            Margin="8" MinHeight="200" IsReadOnly="True"
            AutoGenerateColumns="True"
            ItemsSource="{Binding Data, ElementName=EmpDomDataSource}" />

    </Grid>
</UserControl>

The above design is similar to what we have already done in previous sections, except that we replaced DataPager with a stack panel which contains a group of buttons placed next to each other using horizontal orientation.

The design would look similar to the following:

The next section contains the code-behind for the above design.

Paging data through DomainDataSource and without using DataPager: code-behind

This section contains the code-behind for the markup provided in the previous section. The following is the code:

Imports System.ServiceModel.DomainServices.Client
Imports System.Windows.Data

Partial Public Class DdsPagingCodeBehind
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub EmpDomDataSource_LoadedData(ByVal sender As Object, ByVal e As System.Windows.Controls.LoadedDataEventArgs) Handles EmpDomDataSource.LoadedData
        If e.HasError Then
            System.Windows.MessageBox.Show(e.Error.ToString, "Load Error", System.Windows.MessageBoxButton.OK)
            e.MarkErrorAsHandled()
        End If
    End Sub

    Private Sub btnFirstPage_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnFirstPage.Click
        Me.EmpDomDataSource.DataView.MoveToFirstPage()
    End Sub

    Private Sub btnPreviousPage_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnPreviousPage.Click
        Me.EmpDomDataSource.DataView.MoveToPreviousPage()
    End Sub

    Private Sub btnNextPage_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnNextPage.Click
        Me.EmpDomDataSource.DataView.MoveToNextPage()
    End Sub

    Private Sub btnLastPage_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnLastPage.Click
        Me.EmpDomDataSource.DataView.MoveToLastPage()
    End Sub

End Class

Once the form is executed, we should see an output similar to the following:

The next section gives an explanation for the above code.

Paging data through DomainDataSource and without using DataPager: code-behind explanation

In my previous article, I described the "CurrentItem" and "DataView" properties available as part of the DomainDataSource object.

Pagination using DomainDataSource can be easily achieved using the following methods (available with "DataView" property of DomainDataSource):

• MoveToFirstPage
  
• MoveToNextPage
  
• MoveToPreviousPage
  
• MoveToLastPage
  
• MoveToPage

The first four methods from the above list would give us respective entity objects from the current position. "MoveToPage" is a special case, where we can directly land on a specific page by specifying the page number.

Let us test the "MoveToPage" method.  Modify the stack panel present in the previous markup in such a way that it includes two more controls, as shown below:

        <StackPanel Orientation="Horizontal" Margin="8" >
            <Button x:Name="btnFirstPage" Content="&lt;&lt;" Margin="5, 0, 0, 0" />
            <Button x:Name="btnPreviousPage" Content="&lt;" Margin="5, 0, 0, 0" />
            <Button x:Name="btnNextPage" Content="&gt;" Margin="5, 0, 0, 0" />
            <Button x:Name="btnLastPage" Content="&gt;&gt;" Margin="5, 0, 0, 0" />
            <sdk:Label x:Name="lblGotoPos" Margin="25,0,8,0" Content="Go to:" />
            <TextBox x:Name="txtGotoPos" Margin="5,0,0,0"  Width="35" ></TextBox>
            <Button x:Name="btnGoTo" Content="Show" Margin="5,0,0,0" Width="45"/>
        </StackPanel>

Add a new method to the code-behind as follows:

    Private Sub btnGoTo_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnGoTo.Click
        If Me.txtGotoPos.Text > Me.EmpDomDataSource.DataView.PageCount - 1 OrElse
            Me.txtGotoPos.Text < 0 Then
            MessageBox.Show("Invalid Page number")
        Else
            Me.EmpDomDataSource.DataView.MoveToPage(Me.txtGotoPos.Text)
        End If
    End Sub

Finally, the output would look similar to the following:

Also, make sure that the page index starts with zero, and my code works accordingly. You may have to modify the logic if it has to start with one.

My upcoming articles will focus more on using the "DomainDataSource" element.  I hope you enjoyed the article and any suggestions, bugs, errors, enhancements etc. are highly appreciated at http://jagchat.spaces.live.com/