Sunday, August 21, 2011

Delete Datagrid Rows

Problem :
               One of the question which was asked on the silverlight forum was how to delete multiple rows of the datagrid when you have provided the checkboxs in the datagrid for the selection of more then one row in the datagrid.

Solution :
            The solution to this problem is very simple and as I have not perform such functionality like that to delete records based on the number of selected records in the datagrid. I do perform such functionality in the asp.net grid but not in the silverlight datagrid. The output can be seen in the Image 1, here you can see that I have button control with content as "Delete" this button is used to remove the selected records and one datagrid control which display the record and each record has the checkbox control which is used for multiple selection to delete.


Image 1

The xaml code for the sample application is shown in the List 1, here you can see that button control is placed inside the stack panel layout which is placed in the first row of the grid layout. Then in the second row is the datagrid control which has number of columns binds to the properties which are displayed to the user here you can see that I have used DataGridTemplateColumn for the first column which is used to have checkbox control so the selection of the row and the checkbox control is bind to the IsSelected property with mode TtwoWay.


List 1

The code behind part which is used to remove the records from the datagrid is shown in the List 2, here you can see that I have selected the records which has the IsSelected property to true from the customerList which is declared at class level and bind to the ItemsSource of the datagrid control in the Loaded event of the page.


List 2
Here in the List 2 you can first I have search for the selected records of the datagrid which user has selected for the delete after selecting the record I have use foreach loop to remove item one by by from my customerList which is bind to the datagrid control and has the original records which ware fetched from the database. I have just simply use the Remove function of the Observable collection if you are using web service then you have to either pass the list of selected records or need to pass the selected items Ids and then on the completed event of your remove/delete web service method you can remove it locally or need to fetch record by calling web service method.You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

5 comments:

Anonymous said...

Hello,
Thanks to this post.

Can you clarify a little bit please this example.

What is customerList ?, I am using link to entityes. Have you got an example step by step.

Thanks
Best regards.

Asim Sajjad said...

Anonymous : customerList is observeable collection which hold the record locally. If you see the code you will understand how code as well :)

Anonymous said...

Hello sir,
After trying some lines of code i don't know how to load my observablecollection list it's always null.
This is my part of code that i am using for my project to load observablecollection:

public partial class MainPage : UserControl
{
ObservableCollection UserList;
ObservableCollection AllUserList = new ObservableCollection();


public MainPage()
{
InitializeComponent();
UserList = new ObservableCollection();
dgPerson.ItemsSource = UserList;
}etc...

Any suggestions ??
Thanks best regards...

Asim Sajjad said...

!Anonymous : After looking at your code your UserList list will be null as you are not adding or assigning return value of the async method to the UserList. did you see my code which I have used in this exmaple ?

Prashant said...

we used same approach.. but had problems with check box control.. it was firing on its on.. when scroll the grid...