In Focus

Show/Delete/Edit data in WPF DataGrid using LINQ to SQL Classes

This article will demonstrate how to Show, Delete, and Edit data in WPF Data Grid using LINQ to SQL Data Classes.

This article will demonstrate how to Show, Delete, and Edit data in WPF Data Grid using LINQ to SQL Data Classes. What is LINQ to SQL?? When you want to use Language-Integrated Query (LINQ) to access data in a database, you do not connect directly to the database. Instead, you create classes that represent the database and its tables, and use those classes to interact with data. You can generate the classes through the Object Relational Designer or by running the SqlMetal.exe utility. For more information, see Object Relational Designer (O/R Designer) and Code Generation Tool (SqlMetal.exe).

So Let's start first of all add a new item LINQ to SQL data Classes.

WPF DataGrid

Figure 1.

Now drag and drop database table using server explorer.

WPF DataGrid

Figure 2.

If you are using Visual studio 2008 then you need to add a reference of WPF Toolkit, you don't need to add this reference in visual studio 2010.

WPF Toolkit

Figure 3.

Add wpf toolkit name space on your .xaml page or window whatever you using.

xmlns:grid=http://schemas.microsoft.com/wpf/2008/toolkit

This is my DataGrid.

  1. <Grid>  
  2.         <grid:DataGrid x:Name="MyDataGrid" x:Uid="MyDataGrid" AutoGenerateColumns="False"  
  3.                        AlternationCount="2" SelectionMode="Single" Margin="0,31,0,0">             
  4.             <grid:DataGrid.Columns>  
  5.                 <grid:DataGridTextColumn Binding="{Binding  Path=CustomerID}" IsReadOnly="True" Header="Customer ID" Width="SizeToHeader" />  
  6.                 <grid:DataGridTextColumn Binding="{Binding Path=CompanyName}" Header="Company" Width="SizeToHeader" />  
  7.                 <grid:DataGridTextColumn Binding="{Binding Path=ContactName}" Header="Name" Width="SizeToHeader" />  
  8.                 <grid:DataGridTextColumn Binding="{Binding Path=City}"  
  9.                                     Header="City" Width="SizeToHeader" />  
  10.                 <grid:DataGridTextColumn Binding="{Binding Path=Country}" Header="Country" Width="SizeToHeader" />  
  11.                 <grid:DataGridTextColumn Binding="{Binding Path=Phone}"  
  12.  Header="Phone" Width="SizeToHeader" />  
  13.                 <grid:DataGridTemplateColumn Header="Edit Row">  
  14.                     <grid:DataGridTemplateColumn.CellTemplate>  
  15.                         <DataTemplate>  
  16.                             <Button Content="Edit" Click="EditButton_Click" />  
  17.                         </DataTemplate>  
  18.                     </grid:DataGridTemplateColumn.CellTemplate>  
  19.                 </grid:DataGridTemplateColumn>  
  20.                 <grid:DataGridTemplateColumn Header="Delete Row">  
  21.                     <grid:DataGridTemplateColumn.CellTemplate>  
  22.                         <DataTemplate>  
  23.                             <Button Content="Delete" Click="DeleteButton_Click" />  
  24.                         </DataTemplate>  
  25.                     </grid:DataGridTemplateColumn.CellTemplate>  
  26.                 </grid:DataGridTemplateColumn>  
  27.             </grid:DataGrid.Columns>  
  28.         </grid:DataGrid>  
  29.         <Button Height="23" Margin="12,2,0,0" Name="LoadButton" Content="Load Customers" VerticalAlignment="Top" Click="LoadButton_Click" HorizontalAlignment="Left" Width="126"></Button>  
  30.     </Grid>  
.XAML.CS
  1. private void LoadButton_Click(object sender, RoutedEventArgs e)    
  2. {    
  3.     LoadCustomers();    
  4. }  
  1. private void LoadCustomers()  
  2. {  
  3.     CustomersDataContext cd = new CustomersDataContext();  
  4.     var customers = (from p in cd.Customers  
  5.                              select p).Take(10);  
  6.     MyDataGrid.ItemsSource = customers;  
  7.     LoadButton.Content = "Customers Loaded";  
  8. }  

Now run your application, you will see output like this. When you click on Load Customers button your data will display in datagrid.

WPF DataGrid

Figure 4. 

WPF DataGrid 

Figure 5. 

  1. private void EditButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     try  
  4.     {  
  5.         CustomersDataContext dataContext = new CustomersDataContext();  
  6.         Customer customerRow = MyDataGrid.SelectedItem as Customer;  
  7.         string m = customerRow.CustomerID;  
  8.         Customer customer = (from p in dataContext.Customers  
  9.                                      where p.CustomerID == customerRow.CustomerID  
  10.                                      select p).Single();  
  11.         customer.CompanyName = customerRow.CompanyName;  
  12.         customer.ContactName = customerRow.ContactName;  
  13.         customer.Country = customerRow.Country;  
  14.         customer.City = customerRow.City;  
  15.         customer.Phone = customerRow.Phone;  
  16.         dataContext.SubmitChanges();  
  17.         MessageBox.Show("Row Updated Successfully.");  
  18.         LoadCustomers();  
  19.     }  
  20.     catch (Exception Ex)  
  21.     {  
  22.         MessageBox.Show(Ex.Message);  
  23.         return;  
  24.     }  
  25. }

WPF DataGrid

Figure 6.

  1. private void DeleteButton_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     CustomersDataContext cd = new CustomersDataContext();  
  4.     Customer customerRow = MyDataGrid.SelectedItem as Customer;  
  5.     var customer = (from p in cd.Customers  
  6.                             where p.CustomerID == customerRow.CustomerID  
  7.                             select p).Single();  
  8.     cd.Customers.DeleteOnSubmit(customer);  
  9.     cd.SubmitChanges();  
  10.     MessageBox.Show("Row Deleted Successfully.");  
  11.     LoadCustomers();  
  12. }

WPF DataGrid 

Figure 7.