Check Box Checked and Un-Checked Events in Data Grid Header

             

In this article we will see how Check Box check and uncheck event works in Data Grid Header. In this article I have created the database using first code approach and the main aim of this article is to explain how to place check box in data grid header and when a header checkbox is checked then all the cells of that column will be in checked state and when header check box is un-checked the all the cells of that column should un-checked state. The below calm code will explain how to place check box in data grid header and cell of that particular column 

<Data Grid AutoGenerateColumns="False" Height="270" CanUserAddRows="False"     Name="dataGrid1" VerticalAlignment="Top" Width="481" >

   <DataGrid.Columns>

    <DataGridTextColumn Header="Name" Binding="{Binding Path=Name}"  Width="50"/>

     <DataGridTextColumn Header="Price" Binding="{Binding Path=Price}" Width="50" />

        <DataGridTextColumn Header="Unit" Binding="{Binding Path=Unit}" Width="50"/>

          <DataGridTemplateColumn>

             <DataGridTemplateColumn.Header>

<CheckBox Content="Uncheck All Or Check All" Checked="CheckBox_Checked"    Unchecked="CheckBox_Unchecked"/>

                    </DataGridTemplateColumn.Header>

                    <DataGridTemplateColumn.CellTemplate>

                     <DataTemplate>

                     <CheckBox Name="chkDiscontinue" IsChecked="{Binding values,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"  />

                        </DataTemplate>

                    </DataGridTemplateColumn.CellTemplate>

                </DataGridTemplateColumn>

            </DataGrid.Columns>

        </DataGrid>

There are two events which take place in Data Grid Header namely checked event and unchecked event. I will explain both events one by one as shown below:

1: Check Box Checked Event in Data Grid Header Select Column:

In this event when you check the check box in Data grid Header Select column then all the check box present in cells of that column will be in checked state. See the below snapshot

The code behind for Check Box Checked Event in Data Grid Header Column Select is

private void CheckBox_Checked(object sender, RoutedEventArgs e)

        {

            Database DB = new Database();

            Products products = new Products();

            foreach (var r in DB.prod)

            {

                r.values = true;

            }

            DB.SaveChanges();

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

           

        }

Check Box Un-Checked Event in Data Grid Header Select Column:

In this event when you un-check the check box in Data grid header select column then all the check box present in cells of that select column will be in un-checked state. See the below snapshot

The code behind for Check Box Un-Checked Event in Data Grid Header Column is

private void CheckBox_Unchecked(object sender, RoutedEventArgs e)

        {

            Database DB = new Database();

            Products products = new Products();

            foreach (var r in DB.prod)

            {

                r.values = false;

            }

            DB.SaveChanges();

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

        }

Summary:

In this article I have explained how check box events works data grid header. I have also uploaded the source code. If you have any doubts please do comment. Thank you for reading my article

Source Code: Download

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