1.
Problem
You have a large amount of
data in an application for end users to navigate.
2. Solution
Take advantage of paging,
sorting, and filtering in Silverlight 4 to help end users navigate
data.
3. How It Works
You take advantage of
properties like DomainDataSource.PageSize as well as add additional controls like the DataPager
to implement paging. The DataPager is
databound to the same DomainDataSource as the DataGrid
in order to enable paging.
In order to enable sorting and arranging the columns of data, configure
the CanUserSourtColumns, CanUserReorderColumns, and CanUserResizeColumns
to true for the DataGrid object.
To configure Filtering, take advantage of the FilterDescriptor
object on the DomainDataSource control as demonstrated in the
next section.
4. The Code
First, open the Recipe 7 properties dialog and enable the WCF RIA Link for
the TestWeb project, save the project settings, and then recompile.
Then, copy the code from Recipe 6 where you databind via XAML as your
starting point for this recipe.
The first modification you make
is to add PageSize="5" to the Customer table DomainDataSource control, which results in five records
displayed in the Customer DataGrid. Next,
add a DataPager to the UI to allow
record navigation. To enable the DataPager,
you first need to set its Source Property to the same value as what is
configured for the DataGrid. You also set the PageSize="5" in order to
page through the data five records at a time.
Unless databinding to a
collection class that implements IPagedCollectionView, you must sort the data. In most cases, you will
databind to an IEnumerable collection, so configuring a SortDescriptor
on the DomainDataSource is required for the DataPager to function. You configure the Customer table data
to sort on the CustomerName field.
Configuring user-enabled sorting
is very easy to do for the DataGrid; you simply set CanUserSortColumns
to True. You also set CanUserReorderColumns and CanUserResizeColumns
to True to add more UI
flexibility.
The last feature that you want
to add in this recipe is record filtering. Add a TextBlock to the top of the UI to prompt users to enter a
few letters to filter, and add a TextBox
to enter the filter text. Next, configure the DomainDataSource
with a FilterDescriptor. You configure the FilterDescriptor to filter on a PropertyPath of CompanyName data field with an Operator of "StartsWith." You databind the Value field on the FilterDescriptor to the Text property of the FilterTextBox
element. If a user enters the letter "c" in the FilterTextBox field, the data is automatically filtered down to just
the CompanyNames that start with c. Listing 1 has the XAML for Recipe 7.
Listing 1. The Recipe 7
MainPage.Xaml File
<UserControl x:Class="Ch09_LOBApplications.Recipe9_7.MainPage"
xmlns:dataControls=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
xmlns:riaControls=
"clr-
namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
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"
xmlns:NorthwindData="clr-namespace:TestWeb.DomainService"
mc:Ignorable="d" d:DesignWidth="600"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
d:DesignHeight="600">
<UserControl.Resources>
<NorthwindData:NorthwindDomainContext x:Key="NorthwindDomainContext" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="34" />
<RowDefinition Height="36" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<riaControls:DomainDataSource x:Name="CustomersDomainDataSource"
DomainContext="{StaticResource NorthwindDomainContext}"
AutoLoad="True" QueryName="GetCustomersQuery" Grid.RowSpan="4">
<riaControls:DomainDataSource.SortDescriptors >
<riaControls:SortDescriptor PropertyPath="CompanyName"
Direction="Ascending"/>
</riaControls:DomainDataSource.SortDescriptors>
<riaControls:DomainDataSource.FilterDescriptors>
<riaControls:FilterDescriptor PropertyPath="CompanyName"
Operator="StartsWith"
Value="{Binding Text, ElementName=FilterTextBox}" />
</riaControls:DomainDataSource.FilterDescriptors>
</riaControls:DomainDataSource>
<sdk:DataPager PageSize="5" Height="28"
VerticalAlignment="Top" Grid.Row="1" Margin="0,3,0,0"
Source="{Binding Data, ElementName=CustomersDomainDataSource, Mode=TwoWay}" />
<sdk:DataGrid x:Name="CustomersDataGrid" Grid.Row="2"
Height="134" VerticalAlignment="Top" CanUserSortColumns="True"
CanUserReorderColumns="True" CanUserResizeColumns="True"
ItemsSource="{Binding Data, ElementName=CustomersDomainDataSource, Mode=TwoWay}"
/>
<TextBlock Height="29" Name="textBlock1" VerticalAlignment="Top"
LineHeight="13.333" FontSize="13.333" HorizontalAlignment="Left"
Width="355" Margin="0,4,0,0"
Text="Enter The First Few Letters of the Company Name:" />
<TextBox x:Name="FilterTextBox" HorizontalAlignment="Right"
Margin="0,4,8,1" TextWrapping="Wrap" Width="233"
d:LayoutOverrides="VerticalAlignment"/>
</Grid>
</UserControl>
|
Figure 1 has
the UI for Recipe 7.
