This article is compatible with the latest version of Silverlight for Windows Phone 7.
This article is Part 2 of the series Building a DataGrid Control for Silverlight for Windows Phone.
Introduction
In my previous article I introduced three possible ways to build and use a DataGrid Control on the Windows Phone 7 platform. Then I showed how to create a “Windows Phone 7 ready” DataGrid starting from the source code of the control included in the Silverlight toolkit. I used the last edition available for Silverlight 3 since some features of Silverlight 4 are missing in Windows Phone at the moment. This time I will focus on the porting of the AgDataGrid free version by DevExpress. AgDataGrid is an alternative to the standard Silverlight DataGrid Control and offers a series of interesting features. I will show you how to make the control work in the Windows Emulator using the Windows Phone Developer Tools Beta July 2010 Edition and starting from the source code of the original AgDataGrid. Unfortunately the license which comes with the control does not allow me to redistribute the source code modified for working on Windows Phone, but if you follow my hints you should be able to get the same result.
Here you can watch a video showing some of the features of the AgDataGrid control running on the Windows Phone emulator, like grouping by column, different column types, row previews and so on.
The AgDataGrid Control
The AgDataGrid Control is a nice tool made available by DevExpress as an alternative of the standard Silverlight Datagrid Control. You can view all the features here . Beside the commercial version, DevExpress provides a free version with the full source code after registration at the following page. This version also has a lot of features, the most significant are:
- data sorting against multiple columns
- data grouping against multiple columns
- column auto-width, movement and resizing
- row editing
- row preview
- multiple column types/editors.
Porting the AgDataGrid on Windows Phone
How nice would it be to see some of these features inside the Windows Phone 7 platform. Let’s find out. The first thing to do is to get the Windows Phone Developer Tools Beta July 2010 Edition and then get the source code of AgDataGrid. I suggest opening the AgDataGrid Solution in Visual Studio 2010 and keep it open as a reference and at the same time creating a new solution in another instance of Visual Studio 2010 using the category“Windows Phone Class Library” listed in the “Silverlight for Windows Phone” templates, as shown below.
Then, you should replicate the folder structure that you see in the “DevExpress.AgDataGrid” project included in the original solution, after putting a copy of all the original files in their respective directory of the new solution. Now, if you try to compile you will probably get a lot of errors and warnings, but do not panic! Things are easier than it seems.
Since the code includes some unit testing and there is no official support for it in Silverlight for Windows Phone at the moment, you need to find a workaround. In the blog of Jeff Wilcox there is the solution: a Unit Test Framework for Silverlight 3 and Silverlight for Windows Phone available here. What you just need to do after the download is to add the reference to Microsoft.Silverlight.Testing.dll and Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight.dll. Getting a successful compilation is not enough; you also need to comment out any reference to the AgDataPicker class since it derives from the DatePicker Control which is not supported in Silverlight for Windows Phone. What do you lose with that? You lose the possibility to use a small calendar control when you edit a data type value in a cell; but I think nobody will burst out crying for this.
Another thing to pay attention to is that there is no support for mouse wheel in Silverlight for Windows Phone (I would have been surprised otherwise) and obviously you should comment out any reference to this in the code.
After a small amount of other fittings, you should be able to get a successful build. As you can see in the following image most of the features are still available.
At a first glance, what seems to work is:
- data grouping against multiple grid columns
- data sorting against multiple grid columns
- column movement
- column resizing (but it's difficult)
- column auto width
- row editing
- focused row and focused cell
- vertical/horizontal lines
- multiple column types/editors
- preview display mode
Of course, not everything works perfectly and some adjustments are needed in terms of size and look and feel in order to get compliant with the size of the small screen and the guidelines of the METRO design but it is a good starting point.
Exploring the main features
The original AgDataGrid package is accompanied by some examples with source code which provide a starting point on how to put in practice the main features of the control. Not all are ready to work inside the Windows Phone emulator but with some small adjustments you should be able to make them work.
The first is the so called “Column layout”. Here the column widths can be automatically modified to match the owner grid’s width. This is useful when you orient in landscape mode the device and the width of the grid changes consequently.
The second one, “Grouping”, groups data by one or more specific columns. This is also useful on a small screen although the operation of drag and drop over the touch screen may be difficult.
The third one, “Column Types” shows you various column types available including custom editors for a given column.
“Preview” and “Preview Layout” are samples on how to show a preview for each data row either with a panel preview.
Conclusion
In this article we focused on porting the AgDataGrid Control on the Windows Phone platform. We provided some guidelines to adapt and rebuild the source code of the AgDataGrid to make it work on Windows Phone. Finally we explored some of the features available under the new platform. achieving the first goal.