(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Building a DataGrid Control for Silverlight for Windows Phone - Part 2

(2 votes)
Walter Ferrari
>
Walter Ferrari
Joined Dec 17, 2009
Articles:   19
Comments:   12
More Articles
5 comments   /   posted on Sep 17, 2010
Categories:   Windows Phone , Controls

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.

AgDataGridOnEmulator1

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.

VSLibProject

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.

AgDataGridOnEmulator2

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.

ColumnLayout

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.

ColumnTypes

“Preview” and “Preview Layout” are samples on how to show a preview for each data row either with a panel preview.

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.


Subscribe

Comments

  • -_-

    RE: Building a DataGrid Control for Silverlight for Windows Phone - Part 2


    posted by Odi Kosmatos on Sep 17, 2010 16:18
    Do you need editing capabilities, or is this for display only purposes?
  • -_-

    RE: Building a DataGrid Control for Silverlight for Windows Phone - Part 2


    posted by Fallon on Sep 18, 2010 02:42

    So this article can be summed up as...

    Download the AgDatagrid and attempt to port it yourself.

    Brilliant...

  • -_-

    RE: Building a DataGrid Control for Silverlight for Windows Phone - Part 2


    posted by indyfromoz on Sep 18, 2010 15:18

    Windows Phone 7 promotes user experience, above anything else. The concept of a "datagrid" may not play very well in the mind of the user. Having a pivot of items or a master/detail with a progressive detail hierarchy is perhaps a better user experience.

     

    My 2 cents...

  • -_-

    RE: Building a DataGrid Control for Silverlight for Windows Phone - Part 2


    posted by Florin Antoci on Feb 11, 2011 13:57

    Hi

    Interesting article. I did the port of the grid, and made some layout adjustments to fit the touch environment, and it works pretty well on the emulator. Anyway, seems that emulator works much faster than the real device (at least on my machine - intel i7), and on my HTC 7Mozart, is almost impossible to use it: the grid is blocking for seconds when doing drag-drop, or resize, or totals etc. After my checks, the behind code for layout and style has low performance,by calling the same parts of the code over and over again (and I think this is related to memory leaks issues that most Silverlight users are complaining about AgDataGrid and slow performance for high number of columns situations). 

    As a final result, I don't know if this is such a good idea after all. If you plan to have more than 5-6 columns, to start using a horizontal scrollbar, it starts to be very slow. 

    Anyway, good article and good job...


    Regards

  • -_-

    RE: Building a DataGrid Control for Silverlight for Windows Phone - Part 2


    posted by Walter on Feb 11, 2011 18:40

    Thanks Florin,

    At that time I hadn't tried the application on a real device but I had suspected that it was slow.

    ..and thanks for sharing your experience with the community :-)

    Wal

Add Comment

Login to comment:
  *      *       

From this series