Sys.UI.DataView to show records from SharePoint lists via listdata.svc

There are hundreds of articles probably about this, but some of them did not work for me. Just simply Sys.UI.DataView client control did not bind to listdata.svc. So I used my own way to get and display the data using client side template. I know that probably most of the developers do not use anymore Microsoft Ajax library and consider it obsolete, but it my eyes is still reliable to be used in SharePoint environment, in combination with JQuery.

What will follow is a simple example of how to get the data from a custom list called “Ajax”, which contains a single column called “Title”. I used the simplest example I had in my mind for a practical demonstration.

1. Prepare Sys.UI.DataView control for undefined object properties inside data source

Sys.UI.DataView is throwing an error if in the one the properties you want to display is referencing to undefined object properties in the data source. As I am not always sure what is coming from the web service, I modified “set_data” method to replace these with an empty string. So HTML code below for a template where actually “CustomTitle” properties doesn’t exist in the data source will not fail.

  <asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="true" EnablePartialRendering="true" EnableScriptGlobalization="false"   EnableScriptLocalization="true" LoadScriptsBeforeUI="false">
            <asp:ScriptReference Name="MicrosoftAjax.js" Path="/_layouts/PeppermintFeature/MSAjax/MicrosoftAjax.js" />
            <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" Path="/_layouts/PeppermintFeature/MSAjax/MicrosoftAjaxWebForms.js" />
            <asp:ScriptReference Path="/_layouts/PeppermintFeature/MSAjax/MicrosoftAjaxDataContext.js" />
            <asp:ScriptReference Path="/_layouts/PeppermintFeature/MSAjax/MicrosoftAjaxOpenData.js" />
            <asp:ScriptReference Path="/_layouts/PeppermintFeature/MSAjax/MicrosoftAjaxCore.js" />
            <asp:ScriptReference Path="/_layouts/PeppermintFeature/MSAjax/MicrosoftAjaxComponentModel.js" />
            <asp:ScriptReference Path="/_layouts/PeppermintFeature/MSAjax/MicrosoftAjaxSerialization.js" />
            <asp:ScriptReference Path="/_layouts/PeppermintFeature/MSAjax/MicrosoftAjaxTemplates.debug.js" />
            <asp:ScriptReference Path="Ajax.js" />
<ul id="MyDataView" class="sys-template">
<li>{{ Title }} {{ CustomTitle }}</li>

Please note the files required for this operation being loaded with asp:ScriptManager. If you prefer, you can load them on demand using start.js

2. Get the data from listdata.svc and display it on the page

For this, I used two powerful objects contained by Microsoft Ajax framework: Sys.Data.OpenDataServiceProxy, used for communication with the web service, and Sys.Serialization.JavaScriptSerializer, for converting XML response into an array of objects to server as a datasource. With these object code become very simple.

   		 var dataContext = new Sys.Data.OpenDataServiceProxy("http://servername/sites/mysite/_vti_bin/listdata.svc");
   		 dataContext.query("Ajax", function(response, context, operation, userContext) { 
   		 	 var responseAsJsonString = Sys.Serialization.JavaScriptSerializer.serialize(response);
   		 	 var dw = new Sys.UI.DataView($get('MyDataView'));
   		 	 dw.set_data(Sys.Serialization.JavaScriptSerializer.deserialize(responseAsJsonString ),['Title','CustomTitle']);
   		 function(err) {
   		 		alert("Error contacting service. Status code: " + err.get_statusCode() +'. Message: ' + err.get_message());

Code was working for me in IE7, IE8, IE 9 (did not have the test to chance it IE10 and IE11) and Chrome. So it did the job, no matter if some developers consider it obsolete. For me looks simple and easy to use, but probably used JavaScript framework is in 99% of the cases a matter of personal option.


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s