public class SampleSalesPerson
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Territory { get; set; }
public int Sales { get; set; }
}
This topic is designed to get you familiar working with supported column types and common column operations that you can use when working with the XamDataGrid control.
This topic contains the following sections
The following topics are prerequisites to understanding this topic:
This property allows you to configure whether or not the grid will create columns automatically for each property of data item which is present in the assigned data source.
By default, the XamDataGrid control will automatically determine the appropriate type of column to create based on the type of each ‘category’ of data, (or ‘public property’) exposed on the underlying data. Take, for example, the SampleSalesPerson class, used in the Getting Started with XamDataGrid topic, with its public properties in view:
In C#:
public class SampleSalesPerson
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Territory { get; set; }
public int Sales { get; set; }
}Notice that there are four public properties defined: FirstName, LastName, Sales, and Territory; the XamDataGrid control will create a column, based on the data type of each of these properties. To further conceptualize this process, imagine that several SampleSalesPerson objects are created and added to a list, with each SampleSalesPerson object having unique values assigned for its FirstName, LastName, Sales, and Territory properties.
Continuing this thought process, imagine that the list were assigned as the ItemsSource of the XamDataGrid control, while the AutoGenerateColumn property of the XamDataGrid control is passed the boolean value of true as its parameter, as demonstrated in the following code snippet.
In XAML:
<ig:XamDataGrid x:Name="DataGrid" AutoGenerateColumns="True" />In C#:
DataGrid.AutoGenerateColumns = true;The XamDataGrid control will then create four separate columns of appropriate type, based on these data types and will use the name of each property as the name of its associated column.
The resulting XamDataGrid will appear similar to the following screenshot
The XamDataGrid control also allows you to manually define columns, this enables complete control over what columns are displayed.
There are two scenarios where this behavior is used:
To ensure that the XamDataGrid control only creates certain columns of a certain type for your data
To ensure the XamDataGrid control creates columns automatically, but only need to ensure that a specific column type is used for select columns.
By default, the XamDataGrid control will automatically create all the columns, based on your data; however, it also provides the option for you to explicitly select the type of columns used.
The following code example will show you how to manually define TextColumn and NumericColumn in the XamDataGrid control. However, you can use the same logic for any of the Supported Column Types.
Note that this example is using SampleSalesPerson class as implementation of data items which have 4 public properties: FirstName, LastName, Sales, and Territory. However, it will manually define columns only for 3 properties: FirstName, LastName, and Sales as opposed to default behavior which would auto-generate columns for all 4 properties of the underlying data item.
Disable auto-generation of columns using the AutoGenerateColumns property of the XamDataGrid control.
In XAML:
<ig:XamDataGrid x:Name="DataGrid" AutoGenerateColumns="False" />In C#:
DataGrid.AutoGenerateColumns = false;Create two instances of the TextColumn for string properties and one instance of NumericColumn for numeric property.
In XAML:
<ig:XamDataGrid.Columns>
<ig:TextColumn PropertyPath="FirstName" />
<ig:TextColumn PropertyPath="LastName" />
<ig:NumericColumn PropertyPath="Sales" />
</ig:XamDataGrid.Columns>In C#:
TextColumn column1 = new TextColumn();
column1.PropertyPath = "FirstName";
TextColumn column2 = new TextColumn();
column2.PropertyPath = "LastName";
NumericColumn column3 = new NumericColumn();
column3.PropertyPath = "Sales";
DataGrid.Columns.Add(column1);
DataGrid.Columns.Add(column2);
DataGrid.Columns.Add(column3);Run the application to verify; the XamDataGrid control will display two TextColumn types and one NumericColumn type.
There may be certain situations where you only need to control the specific column types used for one or more columns and would like remaining columns to be automatically created by the XamDataGrid control. The following steps will walk you through the process of manually defining only those columns where you require explicit control over the column type used.
These steps will include adding a TextColumn for the numeric values used for Sales data, in this case the values will be converted to the string data type and rendered within the TextColumn.
Add the following code after the code where the XamDataGrid control object has been instantiated to create columns automatically.
In XAML:
<ig:XamDataGrid x:Name="DataGrid" AutoGenerateColumns="True" />In C#:
DataGrid.AutoGenerateColumns = true;Create an instance of the TextColumn with mapping to the numeric "Sales" property to override its default NumericColumn rendering with TextColumn type.
In XAML:
<ig:XamDataGrid.Columns>
<ig:TextColumn PropertyPath="Sales" HeaderText="Sales (As Text)" />
</ig:XamDataGrid.Columns>In C#:
TextColumn column1 = new TextColumn();
column1.PropertyPath = "Sales";
column1.HeaderText = "Sales (As Text)";
DataGrid.Columns.Add(column1);Run the application to verify; the XamDataGrid control will display four TextColumn objects even for the numeric property: Sales.
The Sales column displayed uses the TextColumn that you just created, overriding the original behavior of the XamDataGrid control, which would normally create a NumericColumn for this data type, although in this context the two column types are visually indistinguishable.
The FirstName, LastName, and Territory columns were automatically created by the XamDataGrid control for the remaining properties of the underlying data, using the AutoGenerateColumns property.
There are several methods exposed from the XamDataGrid control that simplify several common column operations, including: adding, removing, inserting, moving, exchanging and hiding columns. This section will describe these methods and how they are used with examples for further context.
Note that in the following examples that the logical and visual indexes of columns are equivalent, so changes made to underlying columns within the Column collection of the XamDataGrid control will immediately be apparent in the XamDataGrid control’s UI.
The XamDataGrid control allows you to add columns dynamically that you have manually defined; this is useful if you need to add certain columns in response to some condition in your application.
This code snippet demonstrates how to add NumericColumn to the XamDataGrid control, using the Add method. After executing this code, the column will appear to the right of existing columns (if any) or added as the first column on the left of XamDataGrid.
In C#:
NumericColumn numericColumn = new NumericColumn();
numericColumn.PropertyPath = "Sales";
DataGrid.Columns.Add(numericColumn);The XamDataGrid control allows you to remove columns that have both been manually defined as well as those that have been automatically generated, via Remove and RemoveAt methods, respectively.
This code snippet demonstrates how to remove a column that was defined at index 1 in to the XamDataGrid control, using the RemoveAt method. After executing this code, the column will be removed and columns on the right (if any) will be shifted to the left.
In C#:
DataGrid.Columns.RemoveAt(1);The XamDataGrid control allows you to insert columns that you have manually defined; this would be useful, for example if you need to add a column at a specific position within the XamDataGrid control.
This code snippet demonstrates how to insert a new column that was defined at index 0 in to the XamDataGrid control, using the Insert method. After executing this code, the column will appear as the first column within the XamDataGrid control and existing columns (if any) will be shiftd to the right.
In C#:
NumericColumn numericColumn = new NumericColumn();
numericColumn.PropertyPath = "Sales";
DataGrid.Columns.Insert(0, numericColumn);The XamDataGrid allows you to dynamically move columns that you have manually defined; this behavior is useful if you need to rearrange columns on the fly as the result of some qualifying condition within your application.
This code snippet demonstrates how to move two existing columns within the XamDataGrid control, using the MoveColumn method. After executing this code, the column object residing at the oldIndex position within the columns collection will have its index set to newIndex and all columns which have an index equal to or greater than the newIndex within the collection will have their index positions incremented by one. Columns which have an index position lower than newIndex, but higher than the oldIndex will have their index positions decremented by one. This process is demonstrated in the following example.
In C#:
DataGrid.MoveColumn(2, 1);The XamDataGrid control allows you to replace columns which you have manually defined, but not yet added to its columns collection with those that are already present. This behavior is useful if you need to replace a current set of data, contained within a column with another set from your underlying data, which is not yet displayed; in response to some condition in your application.
This code snippet demonstrates how to replace existing column with a new column in the XamDataGrid control, using the ExchangeColumn method.
After execution of this code, the column object that was passed in as the second parameter will be removed from the XamDataGrid control and will be replaced with the column that was passed in as the first parameter.
In C#:
NumericColumn salesColumn = new NumericColumn();
salesColumn.PropertyPath = "Sales";
DataGrid.Columns.Add(salesColumn);
TextColumn territoryColumn = new TextColumn();
territoryColumn.PropertyPath = "Territory";
...
DataGrid.ExchangeColumn(territoryColumn, salesColumn);The XamDataGrid control allows you to hide columns from view; this behavior is accessible via the IsHidden property which is exposed from all Column objects. Hiding a column would be useful if you need to remove a column from view, due to some condition in your app, but don’t want to actually remove it from the grid; the hidden column will maintain its index position within the Columns collection of the XamDataGrid control.
This code snippet demonstrates how to hide manually defined column in the XamDataGrid control. After excuting this code, the Sales column displayed within the XamDataGrid control to be removed from view and the Territory column which is present after the Sales column, is shifted to fill the space that the Sales column initially occupied.
In C#:
NumericColumn salesColumn = new NumericColumn();
salesColumn.PropertyPath = "Sales";
DataGrid.Columns.Add(salesColumn);
...
salesColumn.IsHidden = true;