Silverlight’s Grid Control

Slalom Consultant Marc Schuricht

Slalom Consultant Marc Schuricht is a Denver based software Solution Architect with over 12 years of professional experience in IT projects ranging from configuration and change management to custom enterprise application development.

With the direct integration of SharePoint with Silverlight, Silverlight now becomes an extremely flexible and viable tool for enhancing SharePoint’s default user interface.  With my current project, I have especially found that the Grid control with Silverlight 3.0 presents significantly better than SharePoint’s SPGridView control, which is how we used to have to display custom data to look like a SharePoint list.  As with any new technology, however, there are some pitfalls which I can hopefully shed some light on.

1. Grouping
Ever since SharePoint 2007 first came on the scene with its native ability to configure grouped tables within a grid control everyone has been trying to add this functionality to customized data, whether that was using third party controls or trying to retro-fit SharePoint’s SPGridView.  With Silverlight 3, this becomes trivial.  There are two classes which are necessary to implement this functionality.  1) PropertyGroupDescription 2) PagedCollectionView.  The PagedCollectionView object is instantiated with an IEnumerable source.  Once instantiated, one or more PropertyGroupDescription objects can be added to the collection of PagedCollectionView.GroupDescriptions.  The PropertyGroupDescription is instantiated with a string for the field name on which to build groups.  Therefore, if your underlying object has a property called DueDate, by instantiating your PropertyGroupDescription with the parameter “DueDate”, your grid will automatically group by that field.  Here is an example for those who don’t like to read:



                            var webGroup = new PropertyGroupDescription(“DueDate”);

                            var pcv = new PagedCollectionView(e.SiteItems.OrderBy(item => item.Start));


                            grid.ItemsSource = pcv;


2. Friendly Names for Groups
Taking the above example, if I want to use friendly names for my group headers instead of the CamelCase DueDate, I can attribute the underlying DTO to get this.  Again, example below:

[Display(Name = “Date”, GroupName = “Date”)]

        public string DueDate


            get { return start.ToShortDateString(); }


Now, when I render my grid, my headings will read Date: and not DueDate:  like below:

Custom Group Header Names in Silverlight

You will also notice, that by default I get a count of the items for that grouping.  Also very handy!

Slalom Consulting's Denver office Slalom Consulting has 6 Gold Microsoft Partner Competencies
More about Slalom Consulting’s Denver office. More about Slalom Consulting’s Microsoft Partnership.

subscribe by emailSubscribe to be emailed about new SharePoint posts.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: