Telerik blogs

There are only about 7 hours we have left in 2010 and this will be my last blog post for this year. For those of you who are not familiar with the new RadDomainDataSource control for Silverlight, here is my introductory blog post. This one describes how to load data with the new control and this one is about performing CRUD. Having read these three blogs might lead you to the next logical question: What about MVVM support?

I truly believe that every time someone places an UI element or a control in his view model, a baby kitten dies somewhere. So what can we do about this?MVVM

Luckily, the class that RadDomainDataSource internally uses as its view is public and can be used directly in your view models. You can learn about the relationship between the RadDomainDataSource control and the QueryableDomainServiceCollectionView here.

The architecture of my sample project is fairly simple. I have a page with a grid, a pager and a bunch of other configuration controls. All of these UI elements are bound to a common view model which is the data context of the root element:

  1. <UserControl x:Class="SilverlightApplication1.MainPage"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.     xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  7.     xmlns:e="clr-namespace:SilverlightApplication1.Web.Services"
  8.     xmlns:my="clr-namespace:SilverlightApplication1"
  9.     mc:Ignorable="d"
  10.     d:DesignHeight="300" d:DesignWidth="400">
  11.     <UserControl.Resources>
  12.         <my:CustomersViewModel x:Key="CustomersViewModel"/>
  13.     </UserControl.Resources>
  14.     <Grid DataContext="{StaticResource CustomersViewModel}">
  15.         <Grid.ColumnDefinitions>
  16.             <ColumnDefinition Width="*"/>
  17.             <ColumnDefinition Width="250"/>
  18.         </Grid.ColumnDefinitions>
  19.         <Grid Name="mainGrid" Grid.Column="0">
  20.             <Grid.RowDefinitions>
  21.                 <RowDefinition Height="*" />
  22.                 <RowDefinition Height="Auto" />
  23.             </Grid.RowDefinitions>
  24.             <telerik:RadGridView
  25.                 x:Name="radGridView"
  26.                 Grid.Row="0"
  27.                 ItemsSource="{Binding View}"
  28.                 IsBusy="{Binding IsBusy}"
  29.                 ShowGroupPanel="False"
  30.                 RowIndicatorVisibility="Collapsed"
  31.                 IsFilteringAllowed="False"
  32.                 CanUserSortColumns="False"
  33.                 AutoGenerateColumns="False"
  34.                 IsReadOnly="True">
  35.                 <telerik:RadGridView.Columns>
  36.                     <telerik:GridViewDataColumn DataMemberBinding="{Binding Country}"/>
  37.                     <telerik:GridViewDataColumn DataMemberBinding="{Binding City}"/>
  38.                     <telerik:GridViewDataColumn DataMemberBinding="{Binding ContactName}" Header="Contact"/>
  39.                     <telerik:GridViewDataColumn DataMemberBinding="{Binding ContactTitle}" Header="Title"/>
  40.                     <telerik:GridViewDataColumn DataMemberBinding="{Binding CompanyName}" Header="Company"/>
  41.                 </telerik:RadGridView.Columns>
  42.             </telerik:RadGridView>
  43.             <telerik:RadDataPager x:Name="radDataPager"
  44.                                   Grid.Row="1"
  45.                                   Margin="0, 0, 0, 1"
  46.                                  Source="{Binding View}"
  47.                                   DisplayMode="All"
  48.                                  IsTotalItemCountFixed="True"/>
  49.         </Grid>
  50.         <StackPanel Grid.Column="1" Margin="3">
  51.  
  52.             <Grid>
  53.                 <Grid.RowDefinitions>
  54.                     <RowDefinition/>
  55.                     <RowDefinition/>
  56.                 </Grid.RowDefinitions>
  57.                 <Grid.ColumnDefinitions>
  58.                     <ColumnDefinition/>
  59.                     <ColumnDefinition/>
  60.                 </Grid.ColumnDefinitions>
  61.                 <CheckBox Content="Auto"
  62.                           Margin="1"
  63.                          VerticalAlignment="Center"
  64.                          VerticalContentAlignment="Center"
  65.                           IsChecked="{Binding AutoLoad, Mode=TwoWay}"/>
  66.                 <telerik:RadButton Grid.Column="1"
  67.                                    Content="Refresh"
  68.                                    Margin="1"
  69.                                    Padding="10,2"
  70.                                    Command="{Binding LoadCommand}"/>
  71.                 <TextBlock Grid.Row="1"
  72.                            Text="Page Size"
  73.                            VerticalAlignment="Center"
  74.                            Margin="1" />
  75.                 <telerik:RadNumericUpDown Grid.Row="1"
  76.                                           Grid.Column="1"
  77.                                           Margin="1"
  78.                                          Value="{Binding PageSize, Mode=TwoWay}"
  79.                                          Minimum="0"
  80.                                           IsInteger="True"/>
  81.             </Grid>
  82.  
  83.             <TextBlock Text="Sort by" Margin="0,10,0,0" FontWeight="Bold" />
  84.             <TextBlock Text="Country" />
  85.             <RadioButton Content="Ascending"
  86.                          GroupName="CountrySort"
  87.                          IsChecked="{Binding IsCountryAscendingChecked, Mode=TwoWay}"/>
  88.             <RadioButton Content="Descending"
  89.                          GroupName="CountrySort"
  90.                          IsChecked="{Binding IsCountryDescendingChecked, Mode=TwoWay}"/>
  91.             <RadioButton Content="None"
  92.                          GroupName="CountrySort"
  93.                          IsChecked="{Binding IsCountryNoneChecked, Mode=TwoWay}"/>
  94.             <TextBlock Text="Then by" Margin="0,10,0,0" FontWeight="Bold" />
  95.             <TextBlock Text="City" />
  96.             <RadioButton Content="Ascending"
  97.                          GroupName="CitySort"
  98.                          IsChecked="{Binding IsCityAscendingChecked, Mode=TwoWay}"/>
  99.             <RadioButton Content="Descending"
  100.                          GroupName="CitySort"
  101.                          IsChecked="{Binding IsCityDescendingChecked, Mode=TwoWay}"/>
  102.             <RadioButton Content="None"
  103.                          GroupName="CitySort"
  104.                          IsChecked="{Binding IsCityNoneChecked, Mode=TwoWay}"/>
  105.  
  106.             <TextBlock Text="Filter by" Margin="0,10,0,0" FontWeight="Bold" />
  107.             <TextBlock Text="Contact Title" Margin="0,5,0,0" />
  108.             <telerik:RadComboBox ItemsSource="{Binding ContactTitles}"
  109.                                  SelectedValue="{Binding SelectedContactTitle, Mode=TwoWay}"/>
  110.         </StackPanel>
  111.     </Grid>
  112. </UserControl>

 

All of the business logic happens inside this view model, which makes it perfect for unit testing. A central part of the view model is an instance of the QueryableDomainServiceCollectionView. The view itself and several of its properties are exposed as properties of the view model, so various UI elements can be bound to them:

  1. private readonly QueryableDomainServiceCollectionView<Customer> view;
  2.  
  3. public CustomersViewModel()
  4. {
  5.     NorthwindDomainContext context = new NorthwindDomainContext();
  6.     EntityQuery<Customer> getCustomersQuery = context.GetCustomersQuery();
  7.     this.view = new QueryableDomainServiceCollectionView<Customer>(context, getCustomersQuery);
  8.     //...
  9. }

 

To illustrate this, let’s take a look at how the page size can be changed by the user. The view contains a RadNumericUpDown bound to the PageSize property of the view model:

  1. <telerik:RadNumericUpDown Grid.Row="1"
  2.                           Grid.Column="1"
  3.                           Margin="1"
  4.                          Value="{Binding PageSize, Mode=TwoWay}"
  5.                          Minimum="0"
  6.                           IsInteger="True"/>

 

The view model simply forwards the page changing logic between the view and the model. In my case there is no additional complex logic involved, but I your real-life projects may be more complex than this:

  1. public int PageSize
  2. {
  3.     get
  4.     {
  5.         return this.view.PageSize;
  6.     }
  7.     set
  8.     {
  9.         if (this.view.PageSize != value)
  10.         {
  11.             this.view.PageSize = value;
  12.             this.OnPropertyChanged("PageSize");
  13.         }
  14.     }
  15. }

 

The view model gives you unlimited opportunities to inject custom logic in both directions. As a matter of fact, RadDomainDataSource is built in a very similar way. It aggregates an instance of the QueryableDomainServiceCollectionView and simply forwards information forth and back. So, for example, when you go and change RadDomainDataSource.PageSize to 10, it will simply change the PageSize of its view to 10. In fact, you can write these two lines of code and they will do absolutely the same thing:

  1. radDomainDataSource.PageSize = 10;
  2. radDomainDataSource.DataView.PageSize = 10;

 

You can totally bypass RadDomainDataSource and work directly with the view. That’s the reason why in my previous blog post I have described RadDomainDataSource as just a “XAML-friendly thin wrapper over the QDSCV”. Come to think of it, when you are developing your very own view models that will aggregate a QDSCV, you are kind of writing your very own personal RadDomainDataSource that does exactly what you need. With the only difference that RadDomainDataSource is a control and your view model is not.

187x127_ChristmasCardIn the sample project that I have attached you will also see how to use buttons with commands, how to listen for changes in the QDSCV, and how to retrieve and expose distinct values. So attach your debuggers and hit F5.

May your source code compile and your unit tests pass in 2011! I wish you a Happy New Year!

Download Sample Project


About the Author

Rossen Hristov

 is Senior Software Developer in Telerik XAML Team

Comments

Comments are disabled in preview mode.