Monday, September 27, 2010

Building Silverlight Application using MVVM Part 4 - Delete Item

This is part four of Silverlight Application using MVVM-CRUD Operation that showcases the basic building blocks of a data centric application. 
Deleting an item is quite similar to adding an item. Instead of adding new item to the collection, we just remove the selected item from the collection.

To allow user to delete the selected person, add new Delete button to StackPanel in which Add button was added earlier. The xaml code for that stackpanel will look like as shown below -

Additionally, set the SelectedItem attribute of the DataGrid as
SelectedItem = "{Binding SelectedPerson, Mode=TwoWay}"
in Mainpage.xaml file. The code for datagrid look like as shown below -

Add a Property "SelectedPerson" and method "DeletePerson" to delete the selected person in the PeopleViewModel.cs file in the ViewModel folder as shown below -

Now add handler for delete click event in MainPage.xaml.cs as shown below -

F5 and run the application. The UI will be as shown below -

Select any row from the datagrid and click on delete button, corresponding row will be delted from the datagrid.

At this point we have a complete functioning application that allow user to add data, update data and delete. Next we will take on validation.