DataGrid Paging in Silverlight using WCF RIA Services

Create a new Silverlight application. Be sure that .NET Framework 4.0 is selected.

Next dialog would be following dialog. Select "Enable WCF RIA Services"

To check if WCF RIA Services is enable or not, go to Silverlight application and right click on it to open Properties pane. It will show you the WCF RIA Services link at the bottom

Add an Entity Data Model in Silverlight Web application. For my application, I used Northwind database and its Products table. The snapshot of ED model is shown below

Build your application and add one Domain Service class in Silverlight web application.

Select Entities and Enable Entities as specified below.

If you go to the Domain Service code file created above, you will find one GetProducts method. You need to add orderby clause with it to make sure that paging works fine.

Go to Data Sources window, you will get following data sources.

Click on Product and drag into the MainPage.xaml layout. It would automatically create the DataGrid and bind it with the data source.
The xaml design would look like below

Build and run the application. It would be shown like below

If you go to the xaml, you will find riacontrols tag

<riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:Product, CreateList=true}" Height="0" LoadedData="productDomainDataSource_LoadedData" Name="productDomainDataSource" QueryName="GetProductsQuery" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:NWindDomainContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

Add two properties LoadSize and Pagesize and put values according to your requirement.

<riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:Product, CreateList=true}" Height="0" LoadedData="productDomainDataSource_LoadedData" Name="productDomainDataSource" QueryName="GetProductsQuery" Width="0" LoadSize="30" PageSize="10">

 Put one DataPager control and use same source as DataGrid. The final xaml markup would look like

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices" xmlns:my="clr-namespace:SilverlightApplication1.Web" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        <riaControls:DomainDataSource AutoLoad="True" d:DesignData="{d:DesignInstance my:Product, CreateList=true}" Height="0" LoadedData="productDomainDataSource_LoadedData" Name="productDomainDataSource" QueryName="GetProductsQuery" Width="0" LoadSize="30" PageSize="10">
            <riaControls:DomainDataSource.DomainContext>
                <my:NWindDomainContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>
        <StackPanel>
            <sdk:DataGrid AutoGenerateColumns="False" Height="232" HorizontalAlignment="Left" ItemsSource="{Binding ElementName=productDomainDataSource, Path=Data}" Name="productDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="400">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn x:Name="categoryIDColumn" Binding="{Binding Path=CategoryID}" Header="Category ID" Width="SizeToHeader" />
                    <sdk:DataGridCheckBoxColumn x:Name="discontinuedColumn" Binding="{Binding Path=Discontinued}" Header="Discontinued" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="productIDColumn" Binding="{Binding Path=ProductID, Mode=OneWay}" Header="Product ID" IsReadOnly="True" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="productNameColumn" Binding="{Binding Path=ProductName}" Header="Product Name" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="quantityPerUnitColumn" Binding="{Binding Path=QuantityPerUnit}" Header="Quantity Per Unit" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="reorderLevelColumn" Binding="{Binding Path=ReorderLevel}" Header="Reorder Level" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="supplierIDColumn" Binding="{Binding Path=SupplierID}" Header="Supplier ID" Width="SizeToHeader"
/>
                    <sdk:DataGridTextColumn x:Name="unitPriceColumn" Binding="{Binding Path=UnitPrice}" Header="Unit Price" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="unitsInStockColumn" Binding="{Binding Path=UnitsInStock}" Header="Units In Stock" Width="SizeToHeader" />
                    <sdk:DataGridTextColumn x:Name="unitsOnOrderColumn" Binding="{Binding Path=UnitsOnOrder}" Header="Units On Order" Width="SizeToHeader" />
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
            <sdk:DataPager Source="{Binding ElementName=productDomainDataSource, Path=Data}" />
        </StackPanel>               
    </Grid>
</UserControl>

Build the application and run it. The paging will start working.



This is how we can do binding and paging without writing any single line of code in Silverlight. All you need to do is drag and drop and configuring.