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

In this article we will see how to edit and delete a selected item (selected row) in a Data Grid. In this article I have used the Code-First approach to create a database of employees. Using a Load button I am loading employee details into a Data Grid as shown in the following snapshot.



Using Context Menu For Edit and Delete Operation

In a Data Grid, to edit or delete a specific row, right-click on the selected row. A context menu will then appear on the Data Grid. To learn more about Context Menus click here .

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

XAML code for creating a Context Menu on a Data Grid:

<DataGrid Name="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 appear. The following snapshot will show how the context menu will look in the Data Grid.



Edit Operation

When you click on Edit, the selected item details of the Data Grid will be 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:

private void Edit_Click(object sender, RoutedEventArgs e)

{

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

 

    Database DB = new Database();

    Employee emp = new Employee();

    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 following snapshot shows how the pop-up window looks when you click on edit menu item.



To learn more about the pop-up window click here.

Delete Operation

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

This is the code behind for the delete menu item.
 

private void Delete_Click(object sender, RoutedEventArgs e)

{

    Employee emp = new Employee();

    Database DB = new Database();

    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 shown how to create a context menu for a Data Grid. Using that we saw how an edit and delete operation can be done. If you have any queries then please do comment. Thank you for reading my article.