by October 6, 2009 0 comments

Last month, we took a detailed look at how you can use the .NET RIA Services
SDK for Silverlight to quickly create a Silverlight application that can not
only talk to the database on the server to retrieve data, but also do more
advanced things like sorting, filtering and paging with a minimal amount of
code. This time we’ll continue on from where we left to add the ability to
modify data by inserting, updating or deleting records using the same RIA

Let’s pick up the project that we used last month and build upon it. Our
project, named SLRIA, has a Domain Data Source called prodDataSource which talks
to the NWDomainService in the SLRIA.Web application. The domain service itself
talks to a LINQ class that works with the Products, Suppliers and Categories
tables in the NorthWind database. The Silverlight page also contains a DataGrid
control called dgData that is bound to the domain data source and has a text
filter as well as a data pager control attached to provide filtering and paging
To allow the application to manipulate data you can actually go ahead and use
the DataGrid control . The control allows you to change data within each record
directly. However, this is usually a cumbersome method and what we’d like to do
is to create a Master-Child form to allow richer data editing and addition. For
this, we’ll use DataForm control from the Silverlight Controls Toolkit.

Direct Hit!

Applies To: Web Developers
USP: Create a Silverlight app to
update/delete records from a database
Primary Link:
Search engine Keywords: Silverlight 3

Simply drop a DataForm control from the toolbox in VS under the DataGrid. You
will then need to configure it like this:

<dataFormToolkit:DataForm x:Name="dfDataForm"
Header="Product Details" AutoEdit="False" CurrentItem="{Binding ElementName=dgData,
Path=SelectedItem}" />

This creates a new data entry control called dfDataForm with a header and
editing disabled by default. It is also bound to the selected record in the data
grid. On running the application, you will see a new data entry form at the
bottom of the screen. You can click on any record in the data grid and the
record details will show up in the form below correctly. This lets you perform a
simple Master-Details view quite easily.

You might also want to change some data. For this, click the pencil icon on
the top right of the form and change some data in the editable record. Click on
any other field in the record and you will see that the header of the form shows
a small Asterix. This signifies that the record is “dirty” and needs to be
committed to the database. You will also note that, if you change the record in
the form, the change is immediately reflected in the grid above as well. You can
cancel any change you have made by clicking the button in the form. But before
we see how the changes are written back to the server, let’s take a look at some
more things that you can do with the form.

A simple DataForm control that displays the record selected
in the grid above and also allows you to edit the data shown.
Editing a record shows that the item is ‘dirty’ while also
synchronizing with the grid. Note the ‘*’ next to the header in the image.

Currently, you can only view or edit the data in a record selected in the
Data grid. However, it would also be nice to be able to navigate records within
the form itself as well as be able to add new records or delete any existing

To do this, modify the DataForm definition by adding the following attribute:


Now, when you run the application, you will see three icons in the form —
pencil (edit), + (add), – (delete). You can go ahead and add a bunch of other
buttons as well such as, navigation or confirmation buttons. The easiest way to
do this is to change the attribute to look like this:


You will notice that all the buttons other than edit are disabled. This is
because we have only bound the current item in the data form to the selected
item of the grid. The form has no clue about the collection of records and their
structure to be able to navigate, add or delete from them. To rectify this
issue, add the following attribute to the data form definition:

ItemsSource="{Binding Data, ElementName=prodDataSource}"

Now run the application and you will see that all features are enabled. You
can navigate records, edit them, add a new one and even delete records. Not only
that, the Data grid also remains in sync with the actions you perform in the
data form. So go ahead and do some of them now.

Different command button customizations that work once the
form is bound to the data source.
Saving back to the server requires you to commit the changes
and submitting the data.

Once you have changed some data around, go and verify these changes in the
source database. You will see that none of these changes have actually hit the
database itself! You must remem
ber that Silverlight is a client side application and so is the data form. It is
actually the domain data source control that needs to send the data back to the

To do this, you must commit all changes that you made in the form to the
domain data source and then submit these changes back to the server. To do this,
simply add a button below the data form like this:

<Button x:Name="btnSubmit" Content="Save to Server"
Click="btnSubmit_Click" />

And add the following in the click event handler:


Now when you run the application, make whatever changes you wish and then
finally click the button. This will submit all the changes in a batch back to
the server.

The DataForm control is quite powerful in the manner that you can really
customize a number of things in it. There are different templates like the
ReadOnly, NewItem, Edit and Header that let you customize the display of each of

You can also select from a number of different bound field types to show
textboxes, checkboxes, calendars, drop downs and a complete custom field type.
This allows you to create complex and feature rich data bound data forms quite
easily. However, this is beyond the scope of this article and not something
we’ll delve into. Next month, we’ll look at validating the data being sent to
the server and how to give a message back to the user.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.