Scott Morrison : Sorting

Silverlight 2 DataGrid is Released

scmorris — Wed, 15 Oct 2008 09:43:53 GMT

As you might have heard, we just released Silverlight 2, and with it the first version of the Silverlight DataGrid! We have been building this for a while, giving the first glimpse of it last March in Silverlight 2 Beta 1, and tweaking it ever since based on your feedback. We were able to pack a lot of great features into it, and I look forward to hearing from you what features you want next!

In celebration of its release, all of the previous walkthroughs have been updated to work with the RTW bits, and new walkthroughs are on their way.

Also, if you have never used the Silverlight DataGrid before, here is a good place to start.

What's New?

You might be wondering what has changed since Beta 2:

	Accessibility: One of the biggest features that we have added since Beta 2 is the addition of an automation peer framework which allows the DataGrid to work well with screen readers.
	Support for the VSM: The Visual State Manager (VSM) is a tool that allows designers to customize how a control looks in various states, and the animations used to switch between these states. Read more about the Visual State Manager...
	Performance, Performance, Performance: We have done a lot in this area to try to get the DataGrid running as fast as possible. If the last time you used it was in Beta 1 or even Beta 2, you should definitely take another look.
	API Improvements: Based on your feedback, we took another pass through the API in an effort to simplify it more and give you more control over the DataGrid. Read about the Breaking Changes since Beta 2...
	Great New Look: The entire framework got a visual upgrade since Beta 2, and the DataGrid is no exception.

What's Else Can It Do?

For those of you new to the Silverlight DataGrid, here is a quick rundown of what it could already do:

	Auto-sizing: Everything in the DataGrid can be auto-sized. That includes the DataGrid itself, Columns, Rows, Headers, and Row Details meaning that you do not have to worry about the size of what you are putting into the DataGrid, it will grow to accommodate it. Read more about Auto-sizing...
	Sorting: Any time you bind the DataGrid to a collection that implements IList such as a List<T> you now get sorting for free. Even better, sorting isn't limited to a single column, but end users can sort by multiple columns by holding Shift and clicking on additional column headers. As an RTM improvement, you can also choose which columns you want to support sorting. Read more about Sorting...
	Column Reordering: End users can reorder columns at runtime just by dragging a column's header, and developers can control not only the order, but the appearance of the reordering UI as well as the behavior.
	Column Resizing: Just like reordering, and sorting, end users can control the size of columns at runtime.
	Frozen Columns: This is a semi-advanced feature, but once you know about it you'll be surprised at how useful it can be. A frozen column does not scroll horizontally but rather is "frozen" in place. This is the same as the Freeze Column feature in Excel. Read more about Freezing Columns...
	Row Details: This feature is one that we are very excited about. In short, it is an area in each row that allows you to put any UI you want that spans all columns. This could be anything from form-based entry to the contents of a column that would do better if given more space.
	Auto-Generation of Columns: A great feature to help get an application up and running quickly, auto-generation of columns creates a column for every property on the item that it is bound to.
	Highly Customizable Visuals: The look of the Silverlight 2 DataGrid has been improved, but it doesn't mean that you can't change it. Every aspect of the DataGrid's appearance can be retemplated to create a drastically different looking DataGrid that maintains all of the great features listed here. Read more about Customizing Control Visuals...
	Editable: The DataGrid control allows your users to edit the data that it is bound to. One benefit of the Silverlight DataGrid is that it gives you control over what control is used to display the data for each cell, and what control is used to edit the data for each cell even if they are different. The customization is easy, and it handles switching between the two when the user wants to go into edit mode.
	Scrollable: Another benefit that the DataGrid provides is the ability to scroll through long lists of data. The DataGrid does a lot behind the scenes to make this experience as smooth as possible for your users even when you have a large number of rows. You can also scroll columns and items into view to make sure that an item you want to highlight to your user is visible on screen.
	Multi-Selection: The DataGrid provides both single as well as extended selection modes, allowing you to choose if you want users to be able to select more than one row at a time
	Built-in Column Types: Out of the box you can use both Text columns as well as CheckBox columns, and creating your own column types is easy. Read more about using the Built-in Column Types: In XAML In Code Behind at Runtime
	Template Column: In addition to the built-in column types, the template column gives you complete control of what to show during display and edit modes. Read more about using the Template Column: In XAML In Code Behind at Runtime

Sorting Data in the Silverlight DataGrid

scmorris — Tue, 10 Jun 2008 11:11:03 GMT

This post has been updated to work with the RTW version of the Silverlight 2 DataGrid. The code examples are not guaranteed to work with previous Beta versions of the DataGrid. Read more about the features that the Silverlight 2 DataGrid has to offer...

Multi-column Sorting

One of the most requested features in Beta 1 was a way to sort the data contained in the DataGrid. In fact it was so desired that clever developers such as Matt Berseth simply created their own implementation. Fortunately, you no longer have to put much work into getting this functionality out of the box.

To get sorting functionality in your DataGrid you will need to perform the following steps:

Make sure that the collection that you use as the DataGrid's ItemsSource implements IList. Common implementations are List<T> and ObservableCollection<T>.
That's it, you don't need to do anything else

Why this odd requirement? Under the covers, when a DataGrid is data bound to a collection that implements IList, it creates an internal ListCollectionView to provide the sorting functionality. Since CollectionViews can handle multiple levels of sorting, the DataGrid also possesses this functionality and exposes it by allowing your users to click on multiple headers while holding the Shift key.

Here is the DataGrid showing off multi-column sorting:

Customizing Sorting

Alternatively if you want more control over how the sorting algorithm is performed, you can implement the ICollectionView interface currently found in System.Windows.Controls.Data. The DataGrid knows that when it is bound to an implementation of ICollectionView that it should delegate all sorting to it, listening to its SortDescriptions collection and visually displaying the sorting status of the CollectionView. Additionally by using an external CollectionView, you can have multiple controls share the same sort order.

Turning Off Sorting

It is easy to get sorting out of the box, but you might not want to allow your DataGrid or a particular column to be sorted by your user. To turn this off, use DataGrid's CanUserSortColumns property to turn on or off all sorting at the DataGrid level, or use DataGridColumn's CanUserSort to turn on or off sorting for a particular column.

dataGrid1.CanUserSortColumns = false;

unsortableColumn.CanUserSort = false;

DataGrid1.CanUserSortColumns = False

UnsortableColumn.CanUserSort = False

Choosing Which Property to Sort By

Sometimes the property that your column is bound to is not always the one that you want it to sort by. Normally a column sorts by the property that it is bound to through the Binding property. However, if you look at the Template Column there is no Binding property, meaning that the DataGrid has no idea of how to sort the data if you were to click on that column's header. To give the DataGrid that information, you can use a property found on all column types called SortMemberPath. This property allows you to specify a path to the property on the data item that you want that particular column to sort by. Now if you create a template column that uses a DatePicker to allow your user to select a date instead of the standard TextBox, you can still provide sorting for that column by setting the SortMemberPath.

datePickerColumn.SortMemberPath = "Birthday";

DatePickerColumn.SortMemberPath = "Birthday"

Notice that since SortMemberPath is on DataGridColumn, you can use this beyond just template columns and can actually have a column bound to one property, but sort based on another property. This is a much less common scenario, but becomes useful when working with types that normally don't support sorting such as Colors or Images.

Sorting UI Cues

In the picture above you can see that each sorted column has an arrow in its header indicating if it is sorted ascending or descending. It also has a subtle animation when switching between the two. If you want to customize how this looks or behaves, the easiest way to do this is to use the Visual State Manager in Blend. Otherwise, you can manually override the default DataGridColumnHeader template using the DataGrid.ColumnHeaderStyle property. The template contains two storyboards, one named "SortAscending" and the other named "SortDescending". These two storyboards are ran by the DataGrid when a column is sorted ascending or descending. Finally there is a third storyboard called "Unsorted" that is ran when the data is no longer being sorted by that column and can be used to clean up any UI that you used to display sort status.

What's New in the Silverlight DataGrid in Beta 2

scmorris — Tue, 10 Jun 2008 11:07:37 GMT

Silverlight 2 Beta 2 was released this weekend, see what ScottGu has to say about it here. We've all been pretty busy since releasing Beta 1 at MIX, and there are a lot of great new features across the product as a result. The question that you might be asking is what has changed in the DataGrid? Check out this list of new features and their associated posts to find out.

New Features Overview

Auto-sizing: Unlike Beta 1 when you had to specify widths and heights yourself, everything in the DataGrid now can be auto-sized. That includes the DataGrid itself, Columns, Rows, Headers, and Row Details.
Sorting: Now any time you bind the DataGrid to a collection that implements IList such as a List<T> you now get sorting for free. Even better sorting isn't limited to a single column, but end users can sort by multiple columns by holding Ctrl and clicking on additional column headers.
Column Reordering: In Beta 1 the order of columns could be set programmatically, but now in Beta 2 we have extended this capability to the end user, where column reordering can be performed at runtime just by dragging a column's header.
Frozen Columns: This is a semi-advanced feature, but once you know about it you'll be surprised at how useful it can be. A frozen column does not scroll horizontally but rather is "frozen" in place. This is the same as the Freeze Column feature in Excel.
Programmatic Scrolling: Now you can scroll columns and items into view to make sure that an item you want to highlight to your user is visible on screen.
Performance Enhancements: One of the big points of feedback we got in Beta 1 was vertical scrolling speed needed to be faster. We've made some improvements in this space to speed things up.
API Improvements: These are changes that we made to existing API's to try to make using the DataGrid easier. Hopefully they are all for the better, and we would love to hear your feedback if you think that something could be easier.

Scott Morrison : Sorting

Silverlight 2 DataGrid is Released

What's New?

Accessibility:

Support for the VSM:

Performance, Performance, Performance:

API Improvements:

Great New Look:

What's Else Can It Do?

Auto-sizing:

Sorting:

Column Reordering:

Column Resizing:

Frozen Columns:

Row Details:

Auto-Generation of Columns:

Highly Customizable Visuals:

Editable:

Scrollable:

Multi-Selection:

Built-in Column Types: