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

POP UP Window in WPF

In this article we will see how to use a Popup Window in WPF. The Popup control displays

content in a separate window that floats over the current application window. The following

snapshot shows a Popupcontrol that is positioned with respect to a buttonthat is its parent.

What Is a Popup Window ?

A Popup control displays content in a separate window relative to an element or point on the

screen. When the Popup is visible, the Is Openproperty is set to true.

The following Xaml Code Will Create a Popup Window and button will acts as its parent:

<Button Content="Click Me forLogin!!" Click="Login Click"/>

<Popup Name="popup"Is Open="False" Placement="Mouse">

<BorderBorder Brush="Black" BorderThickness="1" Background="Coral">

<StackPanel Orientation="Horizontal">

<Image Source="/WPF.png" Height="100"/>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<TextBlock Text="User Name" Grid.Row="0" Grid.Column="0"/>

<TextBox Grid.Row="0" Grid.Column="1" Name="txtName" />

<TextBlock Text="Password" Grid.Row="1" Grid.Column="0"/>

<PasswordBox Grid.Row="1" Grid.Column="1" Name="txtPwd" />

<Button Content="OK" Grid.Row="2" Grid.Column="1" Click="PopUp_OK_Click"/>

</Grid>

</StackPanel>

</Border>

</Popup>

What are Controls that implement Popup ?

You can build Popup controls into other controls. The following controls implement

the Popup control for specific uses:

· Tool Tip

· Context Menu

· Expander

· Combo Box

How to Close and Open aPopup ?

Open a Popup: The Popup Control displays its contents when IsOpen set true.

privatevoid Popup_Ok_Click(object sender, RoutedEventArgs e)

{

Popup1.IsOpen = true;

}

where popup1 is the name of the popup control

Closing a Popup: The Popup Control displays its contents when IsOpen set false.

privatevoid Popup_Ok_Click(object sender, RoutedEventArgs e)

{

Popup1.IsOpen = false;

}

where popup1 is the name of the popup control

How to set placement behavior of Popup?

To customize the placement of Popup use the placement property of a

Popup control and there are various options in customizing the placement of a Popup such as

custom, right, left, mouse etc.

EX: Placement=”Mouse”

Summary:

In this article I showed how to use Popup control in WPF. If you have any question regarding

improvement of this article please do comment. Thank you for reading my article :)

Source Code:Download