Using ItemProperties and Columns to customize your DataGrid

Learn more about Xceed DataGrid for WPF

 

In the previous article, we went over the basics for adding Xceed DataGrid for WPF to a new WPF application project. We had ended with a note about how both the AutoCreateItemProperties property on DataGridCollectionViewSource, and the AutoCreateColumns property on DataGridControl, are true by default.

This time, let's take a look at these properties in more detail, to learn more about what the AutoCreateItemProperties and AutoCreateColumns actually do, and how we can use them to customize the ItemProperties and Columns instead of letting the DataGrid automatically load everything.

 

Introduction

There are basically two 'layers': first the collection view with its item properties, which represents the fields from the data source; and then the columns in the DataGrid, which represents the fields to be present in the grid. At both levels, it is possible to let Xceed DataGrid for WPF detect automatically all fields and include them, or choose to specify them explicitly.

 

DataGridCollectionView / AutoCreateItemProperties

The DataGridCollectionView is used to wrap any collection that implements the IEnumerable interface to be grouped, sorted, or filtered.

When AutoCreateItemProperties is set to true (default value), an item property will automatically be created in the collection view for each field found in the table (or other) used as the collection view's source.

For example:

<xcdg:DataGridCollectionViewSource x:Key="cvs_products"
	Source="{Binding Source={x:Static Application.Current}, Path=Products}">

</xcdg:DataGridCollectionViewSource>

 

However, perhaps the source has hundreds of columns and we only want a few specific ones. In this case we will want to set AutoCreateItemProperty to false and specify which columns to include.

For example:

<xcdg:DataGridCollectionViewSource x:Key="cvs_products"
	Source="{Binding Source={x:Static Application.Current}, Path=Products}"
	AutoCreateItemProperties="False">

	<xcdg:DataGridCollectionViewSource.ItemProperties>
		<xcdg:DataGridUnboundItemProperty Name="ProductID" Title="ID" />
		<xcdg:DataGridUnboundItemProperty Name="ProductName" Title="Name" />
		<xcdg:DataGridUnboundItemProperty Name="ProductPrice" Title="Price" />
	</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>

 

It is also possible to "append" unbound data to a data item through the use of unbound item properties, which are represented by the DataGridUnboundItemProperty class. These unbound item properties can be used to provide additional data, such as calculated columns

For example:

<xcdg:DataGridCollectionViewSource x:Key="cvs_products"
	Source="{Binding Source={x:Static Application.Current}, Path=Products}">
		<xcdg:DataGridCollectionViewSource.ItemProperties>

		<xcdg:DataGridUnboundItemProperty Name="TotalUnitsValue"
							DataType="{x:Type sys:Double}"
							QueryValue="DataGridUnboundItemProperty_QueryValue" />

	</xcdg:DataGridCollectionViewSource.ItemProperties>
</xcdg:DataGridCollectionViewSource>

 

DataGridControl / AutoCreateColumns

The DataGridControl's column collection represents the columns that are present in the data grid. Columns can be visible or hidden, but they are present to be used by the grid.

When AutoCreateColumns is set to true (default value), a column will automatically be created in the DataGridControl's column collection for each item property found in the DataGridCollectioView (or other) that was set as the DataGrid's source.

For example:

<xcdg:DataGridControl x:Name="OrdersGrid"
	ItemsSource="{Binding Source={StaticResource cvs_products}}">

</xcdg:DataGridControl>

 

However, perhaps we only want a subset for our grid's columns. In this case we will want to set AutoCreateColumns to false and specify which columns to include.

For example:

<xcdg:DataGridControl x:Name="OrdersGrid"
	ItemsSource="{Binding Source={StaticResource cvs_products}}"
	AutoCreateColumns="False">

	<xcdg:DataGridControl.Columns>
		<xcdg:Column FieldName="ProductID" Title="ID" />
		<xcdg:Column FieldName="ProductName" Title="Name" />
		<xcdg:Column FieldName="ProductPrice" Title="Price" />
	</xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>

 

It is also possible to add unbound columns. These represent a column that can be used to display non-data related information such as a label or controls that allow some sort of action to be carried out (e.g., a button to open a window in which the current item can be edited).

For example:

<xcdg:DataGridControl x:Name="OrdersGrid"
	ItemsSource="{Binding Source={StaticResource cvs_products}}">

	<xcdg:DataGridControl.Columns>
		<xcdg:UnboundColumn FieldName="EditRowColumn" Width="30">
			<xcdg:UnboundColumn.CellContentTemplate>
				<DataTemplate>
					<Button Click="Button_Click" Content="..." />
				</DataTemplate>
			</xcdg:UnboundColumn.CellContentTemplate>
		</xcdg:UnboundColumn>
	</xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>

 

For more information, please refer to the documentation.