Skip to main content

Providing, Inserting, and Removing Data

The following page provides a list of examples that demonstrate how to provide data to a grid.

tip

All examples in this topic assume that the grid is bound to the Orders table of the Northwind database, unless stated otherwise.

Binding to a data table

This first code example demonstrates how to create a connection to the Access version of the Northwind database and create a property named "Orders" to which the grid will be bound. The code should be placed in the App.xaml.cs file.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}"/>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>
Binding to an array

The following example demonstrates how to bind a grid to an array defined in the resources of the containing grid.

  <Grid xmlns:s="clr-namespace:System;assembly=mscorlib"
xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<x:Array x:Key="data_list" Type="{x:Type s:String}">
<s:String>Sunday</s:String>
<s:String>Monday</s:String>
<s:String>Tuesday</s:String>
<s:String>Wednesday</s:String>
<s:String>Thursday</s:String>
<s:String>Friday</s:String>
<s:String>Saturday</s:String>
</x:Array>
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{StaticResource data_list}"/>
</Grid>
Retrieving values from the current item

The following example demonstrates how to retrieve the value of the ShipCountry and ShipCity properties of the current item and display them in TextBlocks located above the grid. Note that an item in a grid must be current in order for the information to be displayed.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}"/>
</Grid.Resources>
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<TextBlock Text="{Binding ElementName=OrdersGrid, Path=CurrentItem[ShipCountry]}"/>
<TextBlock Text=" - "/>
<TextBlock Text="{Binding ElementName=OrdersGrid, Path=CurrentItem[ShipCity]}"/>
</StackPanel>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"
DockPanel.Dock="Bottom">
</xcdg:DataGridControl>
</DockPanel>
</Grid>
Initializing an insertion row

The following example demonstrates how to initialize the values of the ShipCountry, ShipCity, and ShipVia columns in an insertion row located in the fixed headers. The handler for the InitializingInsertionRow event is defined in the code-behind class.

The columns that are contained in the grid will be limited to those specified in the ItemProperties of the DataGridCollectionViewSource.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=Orders}"
AutoCreateItemProperties="False">
<xcdg:DataGridCollectionViewSource.ItemProperties>
<xcdg:DataGridItemProperty Name="ShipCountry" Title="Country"/>
<xcdg:DataGridItemProperty Name="ShipCity" Title="City"/>
<xcdg:DataGridItemProperty Name="ShipVia" Title="Ship With"/>
</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>
</Grid.Resources>

<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"
InitializingInsertionRow="InitInsertion">
<xcdg:DataGridControl.View>
<xcdg:CardView>
<xcdg:CardView.FixedHeaders>
<DataTemplate>
<xcdg:InsertionRow/>
</DataTemplate>
</xcdg:CardView.FixedHeaders>
</xcdg:CardView>
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</Grid>
Providing unbound data

The following example demonstrates how to add Person data to a custom ObservableCollection of Person objects.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:local="clr-namespace:Xceed.Wpf.Documentation"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase">
<Grid.Resources>
<local:PersonObservableCollection x:Key="personData">
<local:Person FirstName="Jenny"
LastName="Beland"
Occupation="Writer"/>
<local:Person FirstName="Francois"
LastName="Carignan"
Occupation="Developer"/>
<local:Person FirstName="Pascal"
LastName="Bourque"
Occupation="Developer"/>
<local:Person FirstName="Michel"
LastName="Fortin"
Occupation="Developer"/>
<local:Person FirstName="Marc"
LastName="Laroche"
Occupation="Developer"/>
<local:Person FirstName="Pierre-Luc"
LastName="Ledoux"
Occupation="Developer"/>
<local:Person FirstName="Mathieu"
LastName="Drimonakos"
Occupation="TechnicalSupport"/>
<local:Person FirstName="Catherine"
LastName="Sauzede"
Occupation="Infograph"/>
</local:PersonObservableCollection>
<xcdg:DataGridCollectionViewSource x:Key="cvs_person"
ItemType="{x:Type local:Person}"
Source="{StaticResource personData}">
<xcdg:DataGridCollectionViewSource.GroupDescriptions>
<xcdg:DataGridGroupDescription PropertyName="Occupation"/>
</xcdg:DataGridCollectionViewSource.GroupDescriptions>
<xcdg:DataGridCollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Occupation"
Direction="Ascending"/>
</xcdg:DataGridCollectionViewSource.SortDescriptions>
</xcdg:DataGridCollectionViewSource>
</Grid.Resources>
<xcdg:DataGridControl x:Name="PersonGrid"
ItemsSource="{Binding Source={StaticResource cvs_person}}"/>
</Grid>
Binding to a LINQ table

The following example demonstrates how to bind a grid to a LINQ table and submit any modifications made to the data items using the SubmitChanges method.

This example assumes that a new LINQ to SQL Classes item named Northwind.dbml has been added to the project and that it contains the Orders, Customers, and Shippers tables. The Northwind.designer.cs that is created at the same time represents the NorthwindDataContext and should automatically contain all the relevant members. It also assumes that a property named LinqDataContext that returns a new instance of the NorthwindDataContext exists in the App.xaml.cs code-behind file.

For more information on LINQ, refer to The LINQ Project Web site.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=LinqDataContext.Orders}"/>
<DataTemplate DataType="{x:Type local:Shipper}">
<TextBlock Text="{Binding CompanyName}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Customer}">
<TextBlock Text="{Binding CompanyName}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Employee}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}"/>
<TextBlock Text=" " />
<TextBlock Text="{Binding LastName}"/>
</StackPanel>
</DataTemplate>
<xcdg:CellEditor x:Key="employeeEditor">
<xcdg:CellEditor.EditTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Source={x:Static Application.Current},
Path=LinqDataContext.Employees}"
SelectedItem="{xcdg:CellEditorBinding}"/>
</DataTemplate>
</xcdg:CellEditor.EditTemplate>
</xcdg:CellEditor>
<xcdg:CellEditor x:Key="customerEditor">
<xcdg:CellEditor.EditTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Source={x:Static Application.Current},
Path=LinqDataContext.Customers}"
SelectedItem="{xcdg:CellEditorBinding}"/>
</DataTemplate>
</xcdg:CellEditor.EditTemplate>
</xcdg:CellEditor>
<xcdg:CellEditor x:Key="shipperEditor">
<xcdg:CellEditor.EditTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Source={x:Static Application.Current}, Path=LinqDataContext.Shippers}"
SelectedItem="{xcdg:CellEditorBinding}"/>
</DataTemplate>
</xcdg:CellEditor.EditTemplate>
</xcdg:CellEditor>
</Grid.Resources>
<DockPanel>
<Button Content="Save Modifications"
Click="SaveModifications"
DockPanel.Dock="Top" />
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="OrderID"
Visible="False"/>
<xcdg:Column FieldName="EmployeeID"
Visible="False"/>
<xcdg:Column FieldName="Employee"
CellEditor="{StaticResource employeeEditor}"/>
<xcdg:Column FieldName="CustomerID"
Visible="False"/>
<xcdg:Column FieldName="Customer"
CellEditor="{StaticResource customerEditor}"
Title="Company Name"/>
<xcdg:Column FieldName="ShipVia"
Visible="False"/>
<xcdg:Column FieldName="Shipper"
CellEditor="{StaticResource shipperEditor}"/>
</xcdg:DataGridControl.Columns>
<xcdg:DataGridControl.View>
<xcdg:TableView>
<xcdg:TableView.FixedFooters>
<DataTemplate>
<xcdg:InsertionRow/>
</DataTemplate>
</xcdg:TableView.FixedFooters>
</xcdg:TableView>
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</DockPanel>
</Grid>
Binding to a LINQ query (SQL)

The following example demonstrates how to bind a grid to an SQL LINQ query and submit any modifications made to the data items using the SubmitChanges method.

Although existing data items can be modified and the changes committed, it is not possible to insert new data items. This example assumes that a new LINQ to SQL Classes item named Northwind.dbml has been added to the project and that it contains the Orders, Customers, and Shippers tables. The Northwind.designer.cs that is created at the same time represents the NorthwindDataContext and should automatically contain all the relevant members. It also assumes that a property named OrdersQuery that returns a new new query based on the value selected in the combo box.

The Window1 class implements INotifyPropertyChanged so that the DataGridCollectionViewSource can be notified when the query changes in order to refresh its content.

For more information on LINQ, refer to The LINQ Project Web site.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current},
Path=LinqDataContext.Orders}"/>
<DataTemplate DataType="{x:Type local:Shipper}">
<TextBlock Text="{Binding CompanyName}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Customer}">
<TextBlock Text="{Binding CompanyName}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:Employee}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}"/>
<TextBlock Text=" " />
<TextBlock Text="{Binding LastName}"/>
</StackPanel>
</DataTemplate>
<xcdg:CellEditor x:Key="employeeEditor">
<xcdg:CellEditor.EditTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Source={x:Static Application.Current},
Path=LinqDataContext.Employees}"
SelectedItem="{xcdg:CellEditorBinding}"/>
</DataTemplate>
</xcdg:CellEditor.EditTemplate>
</xcdg:CellEditor>
<xcdg:CellEditor x:Key="customerEditor">
<xcdg:CellEditor.EditTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Source={x:Static Application.Current},
Path=LinqDataContext.Customers}"
SelectedItem="{xcdg:CellEditorBinding}"/>
</DataTemplate>
</xcdg:CellEditor.EditTemplate>
</xcdg:CellEditor>
<xcdg:CellEditor x:Key="shipperEditor">
<xcdg:CellEditor.EditTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Source={x:Static Application.Current}, Path=LinqDataContext.Shippers}"
SelectedItem="{xcdg:CellEditorBinding}"/>
</DataTemplate>
</xcdg:CellEditor.EditTemplate>
</xcdg:CellEditor>
</Grid.Resources>
<DockPanel>
<Button Content="Save Modifications"
Click="SaveModifications"
DockPanel.Dock="Top" />
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="OrderID"
Visible="False"/>
<xcdg:Column FieldName="EmployeeID"
Visible="False"/>
<xcdg:Column FieldName="Employee"
CellEditor="{StaticResource employeeEditor}"/>
<xcdg:Column FieldName="CustomerID"
Visible="False"/>
<xcdg:Column FieldName="Customer"
CellEditor="{StaticResource customerEditor}"
Title="Company Name"/>
<xcdg:Column FieldName="ShipVia"
Visible="False"/>
<xcdg:Column FieldName="Shipper"
CellEditor="{StaticResource shipperEditor}"/>
</xcdg:DataGridControl.Columns>
<xcdg:DataGridControl.View>
<xcdg:TableView>
<xcdg:TableView.FixedFooters>
<DataTemplate>
<xcdg:InsertionRow/>
</DataTemplate>
</xcdg:TableView.FixedFooters>
</xcdg:TableView>
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</DockPanel>
</Grid>
Binding to a LINQ query (XML)

The following example demonstrates how to bind a grid to an XML query on an XDocument that loads the XML version of the Orders table of the Northwind database.

The content of the resulting grid will not be editable.

<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}},
Path=XmlData}"/>
</Grid.Resources>

<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>
Binding to a master/detail data table

The following example demonstrates how to bind a grid to a DataTable that contains DataRelations that will be displayed as child and grandchild detail data.

The code below demonstrates how to create a connection to the Access version of the Northwind database and create a property named "Employees" that retrieves its values from the Employees data table and to which a child and grandchild detail are added.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_employees"
Source="{Binding Source={x:Static Application.Current},
Path=Employees}"/>
<xcdg:IndexToOddConverter x:Key="rowIndexConverter" />

<Style x:Key="alternatingDataRowStyle" TargetType="{x:Type xcdg:DataRow}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},
Path=(xcdg:DataGridVirtualizingPanel.ItemIndex),
Converter={StaticResource rowIndexConverter}}"
Value="True">
<Setter Property="Background" Value="AliceBlue"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<xcdg:DataGridControl x:Name="EmployeesGrid"
ItemsSource="{Binding Source={StaticResource cvs_employees}}"
AutoCreateDetailConfigurations="True">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="Photo"
Visible="False" />
</xcdg:DataGridControl.Columns>
<xcdg:DataGridControl.DetailConfigurations>
<xcdg:DetailConfiguration RelationName="Employee_Orders"
Title="Employee Orders"
ItemContainerStyle="{StaticResource alternatingDataRowStyle}">
<xcdg:DetailConfiguration.Columns>
<xcdg:Column FieldName="EmployeeID"
Visible="False" />
</xcdg:DetailConfiguration.Columns>
<xcdg:DetailConfiguration.DetailConfigurations>
<xcdg:DetailConfiguration RelationName="Order_OrderDetails"
Title="Order Details"/>
</xcdg:DetailConfiguration.DetailConfigurations>
</xcdg:DetailConfiguration>
</xcdg:DataGridControl.DetailConfigurations>
</xcdg:DataGridControl>
</Grid>
Defining detail descriptions

The following example demonstrates how to explicitly define detail descriptions for the DataRelations found in the DataTable to which the grid is bound and how to calculate statistical functions for a detail description whose results will be displayed in the StatRows contained in the footer sections of the details to which the description's corresponding detail configuration will be applied.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_employees"
Source="{Binding Source={x:Static Application.Current},
Path=Employees}"/>
<xcdg:IndexToOddConverter x:Key="rowIndexConverter" />

<Style x:Key="alternatingDataRowStyle" TargetType="{x:Type xcdg:DataRow}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},
Path=(xcdg:DataGridVirtualizingPanel.ItemIndex),
Converter={StaticResource rowIndexConverter}}"
Value="True">
<Setter Property="Background" Value="AliceBlue"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<xcdg:DataGridControl x:Name="EmployeesGrid"
ItemsSource="{Binding Source={StaticResource cvs_employees}}"
AutoCreateDetailConfigurations="True">
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="Photo"
Visible="False" />
</xcdg:DataGridControl.Columns>
<xcdg:DataGridControl.DetailConfigurations>
<xcdg:DetailConfiguration RelationName="Employee_Orders"
Title="Employee Orders"
ItemContainerStyle="{StaticResource alternatingDataRowStyle}">
<xcdg:DetailConfiguration.Columns>
<xcdg:Column FieldName="EmployeeID"
Visible="False" />
</xcdg:DetailConfiguration.Columns>
<xcdg:DetailConfiguration.DetailConfigurations>
<xcdg:DetailConfiguration RelationName="Order_OrderDetails"
Title="Order Details"/>
</xcdg:DetailConfiguration.DetailConfigurations>
</xcdg:DetailConfiguration>
</xcdg:DataGridControl.DetailConfigurations>
</xcdg:DataGridControl>
</Grid>
Manually handling the insertion process

The following example demonstrates how to manually handle the insertion process of a new item into a collection.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_persons"
Source="{Binding Source={x:Static Application.Current},
Path=PersonList}"
CreatingNewItem="CollectionView_CreatingNewItem"
CommittingNewItem="CollectionView_CommittingNewItem"
CancelingNewItem="CollectionView_CancelingNewItem"/>
</Grid.Resources>
<xcdg:DataGridControl x:Name="PersonsGrid"
ItemsSource="{Binding Source={StaticResource cvs_persons}}">
<xcdg:DataGridControl.View>
<xcdg:TableView>
<xcdg:TableView.FixedHeaders>
<DataTemplate>
<xcdg:InsertionRow/>
</DataTemplate>
</xcdg:TableView.FixedHeaders>
</xcdg:TableView>
</xcdg:DataGridControl.View>
</xcdg:DataGridControl>
</Grid>
Deleting selected items

The following example demonstrates how to delete the selected items and handle the DeletingSelectedItemError and DeletingSelectedItems events.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Source={x:Static Application.Current}, Path=Orders}" />
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}"
IsDeleteCommandEnabled="True"
DeletingSelectedItemError="OrdersGrid_DeletingSelectedItemError"
DeletingSelectedItems="OrdersGrid_DeletingSelectedItems"/>
</Grid>
Binding to an IQueryable source

The following example demonstrates how to bind to a data source that implements IQueryable (LINQ DataContext) and allow items to be edited, deleted, inserted, and refreshed.

  <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridVirtualizingQueryableCollectionViewSource x:Key="cvs_queryableSource"
QueryableSource="{Binding Path=QueryableSource}"
CommitMode="EditCommitted"
CreatingNewItem="DataGridVirtualizingQueryableCollectionViewSource_CreatingNewItem"
CommittingNewItem="DataGridVirtualizingQueryableCollectionViewSource_CommittingNewItem"
CancelingNewItem="DataGridVirtualizingQueryableCollectionViewSource_CancelingNewItem"
CommitItems="DataGridVirtualizingQueryableCollectionViewSource_CommitItems"
RemovingItem="DataGridVirtualizingQueryableCollectionViewSource_RemovingItem" />
</Grid.Resources>
<xcdg:DataGridControl ItemsSource="{Binding Source={StaticResource cvs_queryableSource}}"
ItemScrollingBehavior="Deferred"
MaxGroupLevels="2"
MaxSortLevels="2"
IsDeleteCommandEnabled="True"
IsRefreshCommandEnabled="True">
<xcdg:DataGridControl.Resources>
<Style TargetType="{x:Type xcdg:Row}"
x:Key="RowHeightStyle">
<Setter Property="Height"
Value="27" />
</Style>
<Style TargetType="{x:Type xcdg:DataRow}"
BasedOn="{StaticResource RowHeightStyle}" />
<Style TargetType="{x:Type xcdg:InsertionRow}"
BasedOn="{StaticResource RowHeightStyle}" />
</xcdg:DataGridControl.Resources>
<xcdg:DataGridControl.View>
<xcdg:TableView>
<xcdg:TableView.FixedHeaders>
<DataTemplate>
<xcdg:InsertionRow />
</DataTemplate>
</xcdg:TableView.FixedHeaders>
</xcdg:TableView>
</xcdg:DataGridControl.View>
<xcdg:DataGridControl.Columns>
<xcdg:Column FieldName="ProductID"
AllowSort="False"
AllowGroup="False" />
</xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>
</Grid>