Creating CRUD application with RadDomainDataSource for Silverlight

I will extend my colleague’s blog post series regarding RadDomainDataSource control with an example how to create simple CRUD (Create, Read, Update and Delete) application. For more information how to load data initially you can take a look at this blog post. Along with RadDomainDataSource control Telerik provides codeless solution for CRUD operations powered by WCF RIA Services. The solution is a combination between RadGridView and RadDomainDataSource.

First let’s create a default Silverlight project as following:

Next step is to create ADO.NET Entity data model called Northwind.edmx. For the sake of the example I’ll create this entity model with a Northwnd.mdf file which is located in WEB.project App_Data directory. You will need working (started) SQL Server EXPRESS service on your machine (or you have to change connection string accordingly).

Hint: Do not forget to rebuild web project on this stage.

Next step is to create DomainService class with enabled editing.

Then on a client application place RadGridView control with some buttons nearby.

I’m pasting xaml code for a reference how to create binding to SubmitChanges and RejectChanges commands.

<Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <telerik:RadDomainDataSource x:Name="radDomainDataSource" AutoLoad="True" QueryName="GetOrder_Details"> <telerik:RadDomainDataSource.DomainContext> <web:NorthwindContext /> </telerik:RadDomainDataSource.DomainContext> </telerik:RadDomainDataSource> <StackPanel Grid.Row="0"> <telerik:RadButton x:Name="submitChangesButton" Content="Submit Changes" Command="{Binding SubmitChangesCommand, ElementName=radDomainDataSource}" CommandTarget="{Binding ElementName=radDomainDataSource}"/> <telerik:RadButton x:Name="rejectChangesButton" Content="Reject Changes" Command="{Binding RejectChangesCommand, ElementName=radDomainDataSource}" CommandTarget="{Binding ElementName=radDomainDataSource}"/> </StackPanel> <telerik:RadGridView x:Name="radGridView" Grid.Row="1" ItemsSource="{Binding DataView, ElementName=radDomainDataSource}" IsBusy="{Binding IsBusy, ElementName=radDomainDataSource}" ShowInsertRow="True"> </telerik:RadGridView> </Grid>

And generally that’s it – simple and codeless.

How to use the example:

1. Create - You could add new item via Insert key or with RadGridView’s add new item UI (“Click here to add new item”).
2. Update - Put any cell into edit mode change its value and commit row edit via Enter or click on another row. (note that ProductID field is read-only).
3. Delete - Just select an item and press Delete key.

As you will notice both buttons “Submit Changes” and “Reject Changes” will be enabled when any of these operations is finished (after Row edit is finished).

Note: Changes will be populated on a server when Submit Changes button is clicked.

Download the source code

Update:

Enjoy!