Using Xceed DataGrid for Silverlight in SharePoint 2010

Odi [Xceed] — Thu, 16 Dec 2010 18:46:00 GMT

This is a guest blog post written by Johnny Tordgeman from Guardian Information Systems. He has his own blog, check it out.

---

Hey everyone, my name is Johnny Tordgeman and I will be posting some guest posts here on SharePoint 2010 integration with Xceed DataGrid for Silverlight. I would like to thank Odi for giving me the opportunity to show everyone how easy it is to combine Xceed DataGrid for Silverlight with the SharePoint 2010 platform.

In this first post I’m going to show the basic connection of a SharePoint list with the datagrid by building a simple web part that will show all the fields of the default Tasks list using Xceed’s datagrid.

To keep things simple, I will only concentrate on the Silverlight portion for this web part and display it using SharePoint’s Silverlight web part, but on a later post we will add a custom web part to render our Silverlight application and pass parameters such as the list we want to show from SharePoint.

[Ed. note: If you are going to try to run the Silverlight web part on your development machine, see the note at the end of this post]

To get started, create a new Silverlight project and name it SLSPDataGrid then uncheck the “Host the Silverlight application in a new Web site” box and click OK.

To make this example as simple as possible we will use SharePoint’s REST web service to get the data from our Tasks list.

Right click on the project name and select “Add Service Reference”. You will get the following screen:

In the address box type in the address of your SharePoint site and add "/_vti_bin/ListData.svc" to it.

For example, if your site is http://jtordgeman the address box should read: http://jtordgeman/_vti_bin/ListData.svc. [Ed. note: If you have trouble accessing this .svc file, see this solution: http://blog.hompus.nl/2010/03/26/could-not-load-type-idataserviceupdateprovider-when-using-rest-with-sharepoint-2010/]

Change the namespace to SharePointContext and click OK.

Next, let’s add the Xceed datagrid dll to our project. Right click on "References" and choose "Add Reference", then click on “Browse” tab and navigate to where Xceed is installed. Click on "Bin" and then add "Xceed.Silverlight.DataGrid.v1.0.dll".

Your solution should look similar to this:

In MainPage.xaml add the following line to the UserControl declaration:

xmlns:sldg="http://schemas.xceed.com/silverlight/xaml/datagrid"

Now add the control under LayoutRoot using the sldg namespace. Your MainPage.xaml file should look like this:

We have added the control to our UI layer, so all we need now is to set its data. Switch to MainPage.xaml.cs file and following using statements:

using System.Data.Services.Client;
using SLSPDataGrid.SharePointContext;

Inside the MainPage constructor register the Loaded event by typing the following line under InitializeComponent():

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

Finally, type the following method to your code:

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
SharePointContext.HomeDataContext _context = new SharePointContext.HomeDataContext(new Uri("http://jtordgeman/_vti_bin/ListData.svc/", UriKind.Absolute));

this.DataContext = _context.Tasks.IncludeTotalCount();
}

A few things to note:

1) Your context name might be different then mine (HomeDataContext). It’s best to type SharePointContext. And check in the intellisense for your context name.
2) The url that you pass to the context instance must be the same one you typed when we added the service reference.

Build your project, upload the .xap file to a dir in your SharePoint site and add the Silverlight web part to a page. Provide the web part with the address for your xap file and… you’re all done! You should see all the fields of the task list in your Xceed datagrid, with smooth scrolling, and automatic background data virtualization (in case you have hundreds or thousands of tasks) already enabled.

Please feel free to contact me on Twitter (@jtordgeman) or on my blog with any question you might have, and I’ll see you on the next post :)

---

Note: You will need to add a clientaccesspolicy.xml or crossdomain.xml file to the root of your SharePoint website if you don't use the Silverlight web part on the same server as SharePoint (for example if SharePoint is hosted on http://mysharepoint.com and you query it from a silverlight app hosted on http://mysharepoint2.com).

Search results matching tag 'SharePoint 2010'

Using Xceed DataGrid for Silverlight in SharePoint 2010