This post is the first in a series about how to accomplish various tasks using to Xceed DataGrid for WPF. But unlike the documentation where everything is XAML-centric, these posts will demonstrate how to get things done in ...wait for it... actual CODE! Now before you get all excited, I will show you how to do it in code; however, for each example that I provide, I will also post the WPF equivalent—and recommended—way of doing things.
Before I get started, I will have to assume a couple of things:
-
You know how to get your data source and expose it via a dependency property.
-
You know the basics of WPF.
-
-
You have licensed Xceed DataGrid for WPF in your application.
I will also be using the Orders DataTable from the Northwind sample database that I have exposed through a property named Orders defined on my window. The DataContext of the window has been set to the window itself!
public MainWindow()
{
this.DataContext = this;
InitializeComponent();
this.Loaded += new RoutedEventHandler( MainWindow_Loaded );
}
Ready? Here we go!
Getting Data Displayed
Xceed DataGrid for WPF is an ItemsControl and as such exposes an ItemsSource property to which any data source that implements IEnumerable can be provided. The result is a grid that contains a column for every field in the data source and a row for every data item. For example, in the window’s Loaded event:
DataGridControl grid = new DataGridControl();
grid.ItemsSource = App.Orders.DefaultView;
// We know that the default content of the window is a grid, so add
// the datagrid as a child of the grid.
( ( Grid )this.Content ).Children.Add( grid );
You may have noticed that I am using the DataView returned by the data table’s DefaultView property. Remember, the source must implement IEnumerable, which DataTable does not, when setting the ItemsSource property directly.
In XAML, the code is quite similar and the result will be the same:
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Path=Orders}" />
</Grid>
An instance of the DataGridControl class was created, added to the default grid, and its ItemsSource property bound to the static Orders property. One notable difference is that it is not necessary to pass the data table’s DataView because it will automatically be retrieved from the data table and wrapped in a collection view.
Note: All ItemsControls will automatically create a collection view to wrap the data unless a collection view is passed to the ItemsSource property directly.
Why should you use a collection view?
A collection view provides a... well... view of your data, which can be grouped, sorted, and filtered, and through which you can navigate. The DataGridCollectionView class included with Xceed DataGrid for WPF provides the same benefits as the standard collection view, but is also the source through which many of the data grid’s features, such as master/detail and automatic filtering, are exposed.
Armed with this new information, let’s change the previous code to use a DataGridCollectionView:
DataGridCollectionView view = new DataGridCollectionView( App.Orders.DefaultView );
DataGridControl grid = new DataGridControl();
grid.ItemsSource = view;
In XAML, a DataGridCollectionViewSource, which is the XAML proxy of the DataGridCollectionView class, must be used and its Source property set. So let’s create an instance in the resources of our grid and bind the data grid’s ItemsSource property to the DataGridCollectionViewSource. Just like when the ItemsSource property was set directly, the data table’s view will be retrieved and wrapped in a collection view, which just happens to be a DataGridCollectionView.
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
<Grid.Resources>
<xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
Source="{Binding Path=Orders}" />
</Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
ItemsSource="{Binding Source={StaticResource cvs_orders}}" />
</Grid>
If you run the code, you will see that nothing has changed in the final result, but under the hood you will now be able to do much more with your data.
Conclusion
So now you know how to get your data in the data grid, which many of you probably already knew how to do J
As you can see, the XAML, although verbose, is not much different from the equivalent code. And for those who are saying “Bah, why do I need to do that in XAML?”: you’re right, you don’t need to, but the road will be longer and much more painful if you don’t!
