Edit and Delete Operation in DataGrid Using Context Menu, Pop Up Window

In this article we will see how to edit and delete a selected item(selected row) in Data Grid. In

this article I have used Code-First approach to create database of an employee .Using Load

button I am loading an employee details into Data Grid as shown in below snapshot.

Using Context Menu For Edit and Delete Operation:

In a Data Grid, to edit or delete a particular row right click on the selected row then a context

menu will appears on the Data Grid . I have created a context menu for Data Grid, when you right click on Data Grid a context menuwill appear for edit and delete options. The following is the Xaml Code for Context Menu inData Grid.

Xaml Code for Creating Context Menu on Data Grid:

<DataGridName="dataGrid1"Height="186Width="412"

<DataGrid.ContextMenu>

<ContextMenu>

<MenuItem Header="Edit" Click="Edit_Click">

<MenuItem.Icon>

<Image Name="Edit" Source="edit.png" Height="20" Width="20"></Image>

</MenuItem.Icon>

</MenuItem>

<MenuItem Header="Delete" Click="Delete_Click">

<MenuItem.Icon>

<Image Name="Delete" Source="delete.png" Height="20" Width="20"></Image>

</MenuItem.Icon>

</MenuItem>

</ContextMenu>

</DataGrid.ContextM

</DataGrid>

When you right click on the selected row in a Data Grid the context menu will appears. The

below snapshot will show how context menu will looks in Data grid.

Edit Operation:

When you click on the Edit, the selected item details of Data grid will get added to the Pop up

window.You can Edit Data then click Ok to update the data.

This is the code behind for edit click:

privatevoid Edit_Click(object sender, RoutedEventArgs e)

{

popup.IsOpen = true; //Pop up window will open

Database DB = newDatabase();

Employee emp = newEmployee();

int pid = ((Employee)dataGrid1.SelectedItem).Id;

var query = (from t in DB.employees

where t.Id == pid

select t).First();

txtName.Text = query.Name;

txtAge.Text = query.Age.ToString();

txtGender.Text = query.Gender;

txtMobile.Text = query.MobileNo.ToString();

txtAddress.Text = query.Address;

}

The below snapshot show how pop up window looks when you click on edit menu item

Delete Operation:

When you click delete option then selected row from Datagrid will be deleted from the database.

This is the code behind for delete menu item.

privatevoid Delete_Click(object sender, RoutedEventArgs e)

{

Employee emp = newEmployee();

Database DB = newDatabase();

int pid = ((Employee)dataGrid1.SelectedItem).Id;

var query = (from t in DB.employees

where t.Id == pid

select t).First();

DB.employees.Remove(query);

DB.SaveChanges();

MessageBox.Show("Selected Row Deleted Successfully ");

dataGrid1.ItemsSource = DB.employees.ToList();

}

Summary:

In this article I have showed how to create a context menu for Data grid using that we have seen

how edit and delete operation can be performed. If you have any queries please do comment.

Thank you for reading my article.

Source Code: Download