Sorting with Silverlight 2's DataGrid ControlMatt Berseth

So I am just starting to get my feet wet with Silverlight 2.  I have gained some confidence over the past few days, but on the crawl, walk, run scale it feels like I am still crawling.  Beginner or not, I figured I would take a shot at getting Silverlight's DataGrid control to support sorting.  Nothing too complicated - just the standard click on the column header to sort the data.  Surprisingly, I didn't see much on MSDN talking about how to implement sorting using the DataGrid.  I know the documentation is still in the works so I am sure it is coming, but I was a little bit concerned about how to get started.  No worries though, it turned out to be a breeze.  If you are interested in the details, I have a quick description of what I did just beneath the following screen shot.

Live Demo | Download

Creating Some Data

If you follow my blog, you may have noticed that I am partial to the Northwind data set.  This example is no different - my grid is filled with the rows from the customers table.  And I cheated a bit and hard-coded my data so I could focus on the sorting interface and not worry about fetching them from the database.  I figure I can work on the web service part later.

I added a Customer class to my application that contains a handful of the attributes defined by the customer table.  Then I added a static Get method to the Customer class that loads the Customer list if it hasn't been loaded already and returns it.  It looks something like this ...

And just as a side note, I didn't actually key in all 91 Add statements.  I used a bit of SQL to generate these based on the rows in the customer table.  If you give a lot of presentations, demos or just need to create some test data - don't forget about SQL Server.  It can be very handy as a crude code generation tool when you need something quick. 

Defining the DataGrid's Columns

Like ASP.NET 2.0's GridView, the Silverlight DataGrid can infer what column's need to be displayed based on the properties that are found on the data source.  The AutoGenerateColumns property is what controls this behavior.  When it is set to true, the DataGrid automatically adds the columns when the ItemSource property is set.  To be honest though, when working with the GridView I usually don't set the AutoGenerateColumns property to true.  I always want to control the order of the columns, the name (Company Name instead of CompanyName) and often times I do not want to show all of the properties my data source makes available.        

To get this type of behavior, you can use the DataGrid's Columns collection to define the order, header text and type for each of the columns you want displayed.  Like the GridView, you can create different type of column elements based on the data type you are binding to the column to.  Right now it looks like the DataGrid has a DataGridTextBoxColumn for text content, a DataGridCheckBoxColumn for tri-state (Yes/No/Unknown) content and of course a very flexible DataGridTemplateColumn that supports templating. 

Below is a sample where I am explicitly defining the contents of the Columns property using the markup.

Adding HyperlinkButton's for the Column Header

If you notice in the above screen shot, I have specified each column's header text using the DataGridTextBoxColumn.Header attribute.  Well it turns out the XAML programming model is pretty darn flexible.  And I could have used the property element syntax to specify the header title by setting the Header property to a TextBlock like so ...

And if I replace the TextBlock control with a HyperlinkButton (which exposes a Click event) things start coming together for my sorting scenario.  Now the XAML for the Customer's ID DataGridTextBoxColumn takes on the following form.  Notice I have attached an event handler to the Click event and assigned the Tag attribute to the property I want to sort by.

And because I am using the Tag attribute to let me know what property to sort by I can attach all of the column header Click events to the same event handler.  Giving use something like this.

Implementing the Click Event Handler

And now for the easy part.  Our Sort_Click event handler will determine what property to sort the Customers collection by from looking at the value of the Tag attribute.  So I have setup a switch statement that orders the in-memory Customers list by the property that corresponds to the column header that was clicked.  One thing to note is that because the DataGrid control doesn't maintain the sort state, I have to keep track of the last sort property and direction to determine how to order the collection (ASC or DESC) if the same header is clicked twice.   

That's it.  Enjoy!

Web-разработка: Баннер на скорую руку в режиме онлайнХабрахабр: Web-разработка / Блог / Захабренные »« Podcast #33: Quick & Easy JoineryWoodworking Online