Telerik blogs

RadGridView for Silverlight and WCF RIA Services Part II: Basic Editing Support

by Rossen Hristov
January 08, 2010 Web 0 Comments


In my previous blog post I have demonstrated how to display master-details data in an asynchronous manner with RadGridView for Silverlight and WCF RIA Services. I have decided to refactor the sample project a little bit and add some very basic editing support. Here is the changes I have made to the sample project:

  1. I have recreated the ChinookService to support editing.
  2. I have encapsulated the details grid into a new user control called AlbumsControl.
  3. I have added a “Submit Changes” button below the details grid.
  4. I got rid of the IValueConverter that used to create the albums DomainDataSource and defined everything in XAML.

Here is what the new AlbumsControl looks like:

MainPage
  1. <UserControl x:Class="MasterDetailsWithRIAServices.AlbumsControl"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:my="clr-namespace:MasterDetailsWithRIAServices"
  5.     xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Ria"
  6.     xmlns:riaData="clr-namespace:System.Windows.Data;assembly=System.Windows.Controls.Ria"
  7.     xmlns:services="clr-namespace:MasterDetailsWithRIAServices.Web.Services"
  8.     xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
  9.     xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView">
  10.     <Grid Name="LayoutRoot">
  11.         
  12.         <Grid.RowDefinitions>
  13.             <RowDefinition Height="Auto"/>
  14.             <RowDefinition Height="Auto"/>
  15.             <RowDefinition Height="Auto"/>
  16.         </Grid.RowDefinitions>
  17.  
  18.         <riaControls:DomainDataSource x:Name="albumsDataSource"
  19.                                       AutoLoad="True"
  20.                                       QueryName="GetAlbumsForArtistIdQuery">
  21.             <riaControls:DomainDataSource.QueryParameters>
  22.                 <riaControls:ControlParameter ControlName="albumsGrid"
  23.                                               ParameterName="artistId"
  24.                                               PropertyName="DataContext.ArtistId"/>
  25.             </riaControls:DomainDataSource.QueryParameters>
  26.             <riaControls:DomainDataSource.DomainContext>
  27.                 <services:ChinookContext/>
  28.             </riaControls:DomainDataSource.DomainContext>
  29.         </riaControls:DomainDataSource>
  30.  
  31.         <TextBlock Grid.Row="0" Margin="2">Albums:</TextBlock>
  32.         <telerik:RadGridView
  33.                         Name="albumsGrid"
  34.                         MinHeight="100"
  35.                         MaxHeight="400"
  36.                         ItemsSource="{Binding ElementName=albumsDataSource, Path=Data}"
  37.                         IsBusy="{Binding ElementName=albumsDataSource, Path=IsBusy}"
  38.                         Grid.Row="1"
  39.                         Margin="2"
  40.                         AutoGenerateColumns="False"
  41.                         ColumnWidth="*"
  42.                         ShowGroupPanel="False">
  43.             <telerik:RadGridView.Columns>
  44.                 <telerik:GridViewDataColumn Header="Album Title"
  45.                                             DataMemberBinding="{Binding Title}"/>
  46.             </telerik:RadGridView.Columns>
  47.         </telerik:RadGridView>
  48.         <Button Name="submitButton"
  49.                 Margin="2"
  50.                 Grid.Row="2"
  51.                 Content="Submit Changes"
  52.                 Click="OnSubmitChanges"
  53.                 Width="100"
  54.                 HorizontalAlignment="Stretch"/>
  55.     </Grid>
  56. </UserControl>

 

Instead of creating the DomainDataSource in the converter like in the previous version, now the AlbumsControl hosts its own little albums DomainDataSource. Notice how the ControlParameter tells the DomainDataSource what is the artistId it should use when executing the “GetAlbumsForArtistId” query. Since the AlbumsControl is inside row details, the DataContext of the albumsGrid automatically becomes the master data item, in our case the Artist. And since DataContext is an instance of the Artist entity, I have assigned “DataContext.ArtistId” as the PropertyName of the ControlParameter.

Finally, here is what it takes to commit your changes:

MainPage
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Documents;
  8. using System.Windows.Input;
  9. using System.Windows.Media;
  10. using System.Windows.Media.Animation;
  11. using System.Windows.Shapes;
  12. using MasterDetailsWithRIAServices.Web;
  13. using MasterDetailsWithRIAServices.Web.Services;
  14. using MasterDetailsWithRIAServices.Web.Models;
  15. using System.Windows.Controls.Ria;
  16.  
  17. namespace MasterDetailsWithRIAServices
  18. {
  19.     public partial class AlbumsControl : UserControl
  20.     {
  21.         public AlbumsControl()
  22.         {
  23.             InitializeComponent();
  24.         }
  25.  
  26.         private void OnSubmitChanges(object sender, RoutedEventArgs e)
  27.         {
  28.             this.albumsDataSource.SubmitChanges();
  29.         }
  30.     }
  31. }

 

Hiding the details grid and all of its logic into its own user control cleaned up the MainPage considerably:

MainPage
  1. <UserControl
  2.     x:Class="MasterDetailsWithRIAServices.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.     xmlns:my="clr-namespace:MasterDetailsWithRIAServices"
  7.     xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Ria"
  8.     xmlns:riaData="clr-namespace:System.Windows.Data;assembly=System.Windows.Controls.Ria"
  9.     xmlns:services="clr-namespace:MasterDetailsWithRIAServices.Web.Services"
  10.     xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
  11.     xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
  12.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  13.     Width="560"
  14.     d:DesignHeight="480"
  15.     d:DesignWidth="640"
  16.     mc:Ignorable="d">
  17.     <Grid x:Name="LayoutRoot">
  18.         <Grid.Resources>
  19.             <!-- RowDetailsTemplate containing the details (albums) grid. -->
  20.             <DataTemplate x:Key="AlbumsTemplate">
  21.                 <my:AlbumsControl Width="480"
  22.                                   HorizontalAlignment="Left"
  23.                                   Margin="24,2,2,2"/>
  24.             </DataTemplate>
  25.         </Grid.Resources>
  26.  
  27.         <!-- This is where the master (artists) grid gets its data from. -->
  28.         <riaControls:DomainDataSource x:Name="artistsDataSource"
  29.                                       AutoLoad="True"
  30.                                       QueryName="GetArtistsQuery">
  31.             <riaControls:DomainDataSource.DomainContext>
  32.                 <services:ChinookContext/>
  33.             </riaControls:DomainDataSource.DomainContext>
  34.         </riaControls:DomainDataSource>
  35.  
  36.         <telerik:RadGridView
  37.             Name="artistsGrid"
  38.             ItemsSource="{Binding ElementName=artistsDataSource, Path=Data}"
  39.             IsBusy="{Binding ElementName=artistsDataSource, Path=IsBusy}"
  40.             RowDetailsTemplate="{StaticResource AlbumsTemplate}"
  41.             ColumnWidth="*"
  42.             AutoGenerateColumns="False"
  43.             ShowGroupPanel="False">
  44.             <telerik:RadGridView.Columns>
  45.                 <telerik:GridViewToggleRowDetailsColumn/>
  46.                 <telerik:GridViewDataColumn
  47.                     DataMemberBinding="{Binding Name}"
  48.                     Header="Artist"/>
  49.             </telerik:RadGridView.Columns>
  50.         </telerik:RadGridView>
  51.     </Grid>
  52. </UserControl>

 

See the editing in action:

 

Download the source code of the updated demo project from here.

Grid, WCF RIA Services, XAML
About the Author

Rossen Hristov

 is Senior Software Developer in Telerik XAML Team

Related Posts

Web React

Getting Started with the KendoReact PivotGrid

Comments

Comments are disabled in preview mode.