DataGrid Paging in Silverlight using WCF RIA Services


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

image1.gif

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

image2.gif

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

image3.gif

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

image4.gif

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

image5.gif

Select Entities and Enable Entities as specified below.

image6.gif

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.

image7.gif

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

image8.gif

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

image9.gif

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

image10.gif

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.

image11.gif

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.

Up Next
    Ebook Download
    View all
    Learn
    View all