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 records.

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

CommandButtonsVisibility="Add,Edit,Delete"

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:

CommandButtonsVisibility="All"

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}"