This is a migrated thread and some comments may be shown as answers.

ODATA Source Non JSONP

44 Answers 1688 Views

Data Source

This is a migrated thread and some comments may be shown as answers.

44 Answers, 1 is accepted

answered on 28 Sep 2011, 03:32 PM

Thanks for the info. I was hoping that a parameter could be added to the datasource to switch the call to JSON. The calls I am using are the same domain. I'm sure modifying the files would work but I want to be able to upgrade the scripts.

I was able to get what I needed to work by using the Microsoft datajs API. For the Keno datasource I pass in data.results and the Kendo controls render just fine. For the grid the loading icon doesn't seem to work or the refresh method. Is there an example on how to pass and object into the transport object of the datasource? I'm thinking that might be required for the grid refresh either that or is doesn't work in the beta.

The application sample I have working is really nice. Out of box SharePoint 2010 related lists as the backend and Kendo for the interface.

answered on 29 Sep 2011, 09:10 AM

According to this blog http://www.kendoui.com/blogs/teamblog/posts/11-08-25/shields_up_web_service_abstraction_with_kendo_ui.aspx making a copy of kendo.data.odata.js to say kendo.odata.SP2010.js let you extend native kendo.data. So instead of only allowing you to modify the type from "jsonp" to "json" by passing in a parameter it allows you to modify each aspect of kendo.data.This keeps your modification seperated from the core platform files.

Give it a try and the issue with the loading icon might go away as well. I haven't looked too deeply at the code but if you inspect a kendo.data.DataSource instance you'll find some private properties like _pending or _requestInProgress that are probably used by the UI widgets. As you are not using kendo.data.Datasource for retrieving the data those will most likely not updated correctly.

Rainer

answered on 04 Dec 2011, 01:11 PM

Hello,

I am trying to use a SharePoint list in a grid using one of the examples but no entries appear. Can you guys spot something obvious?

<div id="example" class="k-content">
<div id="grid"></div>
<script>
var dateRegExp = /^\/Date$(.*?)$\/$/;

function toDate(value) {
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1]));
}

$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://testserver/sites/testsite/_vti_bin/listdata.svc/TestList",
dataType: "json"
}
},
schema: {
model: {
fields:
{
Title: { type: "string" },
Created: { type: "date" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns:
[
"Title",
{
field: "Created",
template: '#= kendo.toString(toDate(Created), "MM/dd/yyyy")#'
}
]
});
});
</script>
</div>

answered on 05 Dec 2011, 10:38 AM

You see two params ($format and $callback) in the query that are causing issues with SP ODATA implementation.
.../_vti_bin/listdata.svc/Testlist?$format=json&$inlinecount=allpages&$callback=callback&$top=10

When using individual js files kendo.data.odata.js correctly extends kendo.data to ommit those two params.

This seems to be broken when using kendo.all.js. Wish KendoUI would support modules in AMD format, that would help avoiding issues like that :).

<script src="../../source/js/kendo.core.js"></script>
        <script src="../../source/js/kendo.model.js"></script>
        <script src="../../source/js/kendo.data.js"></script>
        <script src="../../source/js/kendo.data.odata.js"></script>
        <script src="../../source/js/kendo.grid.js"></script>
        <script src="../../source/js/kendo.list.js"></script>
        <script src="../../source/js/kendo.pager.js"></script>
        <script src="../../source/js/kendo.sortable.js"></script>
        <script src="../../source/js/kendo.filtermenu.js"></script>
        <script src="../../source/js/kendo.popup.js"></script>
        <script src="../../source/js/kendo.selectable.js"></script>
        <script src="../../source/js/kendo.dropdownlist.js"></script>
        <script src="../../source/js/kendo.numerictextbox.js"></script>
      <script src="../../source/js/kendo.calendar.js"></script>
      <script src="../../source/js/kendo.datepicker.js"></script>

Rainer

answered on 06 Dec 2011, 10:40 AM

Hi all,

Changing kendo.data.odata.js works and causes my WCF data service to return data.

However, I'm still not getting Kendo to process the data and display it in a grid. I'm using a standard task list in SP2010 as datasource and I've verified with Fiddler that I'm actually getting data back from the service. But Kendo is not processing the data and displaying it in the grid.

Below is my source.

Any comments on this?

Best regards,
Peter

<script>

$(document).ready(function () {

var sharableDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://sp2010/_vti_bin/listdata.svc/Tasks"
},
pageSize: 10,
serverFiltering: true,
serverPaging: true,
serverSorting: true
});

$("#grid").kendoGrid({
dataSource: sharableDataSource,
height: 250,
scrollable: true,
sortable: true,
pageable: true,
columns: ["Title", "StatusValue", "Description "]
});

});

</script>

answered on 06 Dec 2011, 11:01 AM

@Peter: Are you defining your table inside the #grid div?
If not you'd need to define the appropriate schema in your kendo.data.Datasource.

@David: Yes that works for me both with your testlist and on an OOTB tasks list.

<body>

<div id="example" class="k-content">
            <div id="grid"></div>
            <script>
                var dateRegExp = /^\/Date$(.*?)$\/$/;

                function toDate(value) {
                    var date = dateRegExp.exec(value);
                    return new Date(parseInt(date[1]));
                }

                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: {
                                url: "http://2010dev/sites/kendoui/ODATA/_vti_bin/listdata.svc/Tasks",
                                dataType: "json"
                                }
                            },
                            schema: {
                                model: {
                                    fields:
                                    {
                                        Title: { type: "string" },
                                        Created: { type: "date" },
                                        StatusValue: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 250,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns:
                        [
                        "Title",
                        {
                        field: "Created",
                        template: '#= kendo.toString(toDate(Created), "MM/dd/yyyy")#'
                        },
                        "StatusValue"
                        ]
                    });
                });
            </script>
        </div>
    </body>

answered on 06 Dec 2011, 12:14 PM

@Rainer,

Nope, doesn't work. Below is copy of my entire file. Only difference between yours and mine is header and URL to odata service.

It doesn't even call the odata feed to get data.

Getting this to work should be a no-brainer.

/peter

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.tmpl.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="js/kendo.core.min.js"></script>
<script src="js/kendo.model.min.js"></script>
<script src="js/kendo.data.min.js"></script>

<script src="js/kendo.data.odata.min.js" type="text/javascript"></script>
<script src="js/kendo.grid.min.js"></script>
<script src="js/kendo.list.min.js"></script>
<script src="js/kendo.pager.min.js"></script>
<script src="js/kendo.sortable.min.js"></script>
<script src="js/kendo.filtermenu.min.js"></script>
<script src="js/kendo.popup.min.js"></script>
<script src="js/kendo.selectable.min.js"></script>
<script src="js/kendo.dropdownlist.min.js"></script>
<script src="js/kendo.numerictextbox.min.js"></script>
<script src="js/kendo.calendar.min.js"></script>
<script src="js/kendo.datepicker.min.js"></script>
</head>
<body>

<div id="example" class="k-content">
<div id="grid"></div>
<script>
var dateRegExp = /^\/Date$(.*?)$\/$/;

function toDate(value) {
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1]));
}

$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://sp2010/_vti_bin/listdata.svc/Tasks",
dataType: "json"
}
},
schema: {
model: {
fields:
{
Title: { type: "string" },
Created: { type: "date" },
StatusValue: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns:
[
"Title",
{
field: "Created",
template: '#= kendo.toString(toDate(Created), "MM/dd/yyyy")#'
},
"StatusValue"
]
});
});
</script>
</div>
</body>
</html>

answered on 07 Dec 2011, 12:58 AM

There's one piece missing in the examples in this thread....

For Sharepoint you need to update the schema section and tell the datasource how the odata feed returns data. This is the only addition you would need to make to Peter's example to get it to work. Note the bolded data: "d.results", addition. Hopefully this helps someone.

schema: {

                           data: "d.results",

model: {

fields:

{

Title: { type: "string" },

Created: { type: "date" },

StatusValue: { type: "string" }

}

};

answered on 07 Dec 2011, 01:52 PM

Well, now I'm completely at a loss. There's something strange going on here. With several lists, I can get kendo to return data. We're talking bare bones, only testing the title field so it's broken down to a minimum. I created that tasklist above just to test this out and it worked. Another list that was previously created, I can not bring back any data to the UI at all. Same exact code, I know I have the column name right since it's the default "Title" and the UI is blank. In Firebug I absolutely know that I'm getting a response with JSON formatted data returned, but the Kendo grid brings back nothing. Created another brand new list and it worked. On yet another list I created yesterday I can't bring back data. That's using the exact same code, with just title field, only changing URL. Does not make sense at all.

answered on 07 Dec 2011, 03:15 PM

@Atanas,

I'm using a vanilla installation of SP2010 Enterprise with SP1 (with all updates and the ADO.NET update to fix oData). The datasource is the standard /_vti_bin/listdata.svc from any site.

After doing some investigation with Fiddler it turns out that the odata service in SharePoint will not return JSON with any of the standard (or previously mentioned changes to .odata.js). However the "standard" online odata feeds like:

http://services.odata.org/Northwind/Northwind.svc
http://odata.netflix.com/v2/Catalog/

Do return data as JSON when called through Kendo.

Usually it's possible to force odata to return JSON by adding contentType: "application/json" to the request header. But somehow this isn't happening when using Kendo.

Not really sure where to go from here.

Best regards,
Peter

answered on 07 Dec 2011, 04:15 PM

Hello,

Currently the Kendo DataSource will work only with OData services which can serve JSON responses. OData services which can only return XML must be configured as a XML datasources. Have in mind though that in this case the remote service should live in the same domain. There is a well known limitation of the XMLHTTPRequest to work only in same domains. JSONP indeed works cross domain but can only deliver JSON responses.

We currently don't have a SP2010 Enterprise with SP1 at our disposal. Is there any public test instance which we can test with?

Regards,
Atanas Korchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 11 Jan 2012, 06:42 AM

SPServices.zip

Guys,

Just an update to this thread re: JSON and sharepoint 2010. I have used the SPServices available at codeplex, and have added the GetJSONListData modification, this allows the XML to be transformed into JSON. My code now look something like this when populating the Kendo datasource.

var projData = $().SPServices.GetJSONListData({
listName: "Announcements", // don't forget - its list NAME, not an Url
columns: ["ID", "Title", "Created"],
debug: true
});

$("#grid").kendoGrid({
dataSource: {
data: projData,
schema: {
data: "rows",
model: {
fields:
{
Title: { type: "string" },
Created: { type: "date" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns:
[
"Title",
{
field: "Created",
template: '#= kendo.toString(new Date(Date.parse(Created)), "dd MMM HH:mm")#'
}
]
});

I need help in getting the date to display correctly though. See attached modified SPServices file.

answered on 11 Jan 2012, 10:16 AM

SPServices works as a wrapper around *.asmx web services that are available in 2007 and 2010. These are "old style" XML SOAP services. In 2010 there's a new service (sitename/_vti_bin/listdata.svc) that provides a generic ODATA access to your SharePoint lists and libraries. The last way to access information is through the client side object model (CSOM).

From the three options only listdata.svc is handled by the KendoUI ODATA implementation. It uses a mapping to ODATA terms like like $top, $skip, $inlinecount, etc (see http://www.odata.org/developers/protocols/uri-conventions for full list) to abstract the underlying data source and provide an interface to their widgets.

If you choose to use one of the other options it would be up to you to provide such an wrapper. This blog post should get you started http://www.kendoui.com/blogs/teamblog/posts/11-08-25/shields_up_web_service_abstraction_with_kendo_ui.aspx

Rainer

answered on 11 Jan 2012, 03:22 PM

Heads-up all, the new alpha of SPServices offers a json output. I've actually tested this out and it works well with SP2010.

http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPXmlToJson

As far as Sharepoint 2010 goes, if you're looking to use listdata.svc and have it be accessed anonymous, and use claims in an extended webpapp, you're going to run into issues. I could never get anonymous access to work for listdata.svc. Even though I could access the full list anonymously, whenever I tried hitting listdata.svc to pull any data back it wanted authentication.

The good thing about Sharepoint is there area ton of options for accessing the lists. The client-object model is fairly easy to use and you can get your output in an array relatively easy. You can also pull the contact via the server-side via a DataViewWebPart and then customize the XSLT so that it returns HTML data in just about any fashion you want. I can give examples of both of those if needed.

answered on 02 Feb 2012, 07:15 AM

I have made it work with JSON.

In kendo.data.odata.js comment the lines
jsonp: "$callback" and
$format: "json"

Sharepoint code below (aspx page inside sharepoint, all js and css files are referenced from a document library)

js/css references and below code was placed inside <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

        <script id="NameTemplate" type="text/x-kendo-tmpl">
            <span> ${ CreatedBy.LastName }, ${CreatedBy.FirstName} </span>
        </script>

        <div id="example" class="k-content">
             <div id="grid"></div>

$(document).ready(function() {

                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read:
                                {
                                    url: "http://sharepointsite/_vti_bin/ListData.svc/ListSample?$expand=CreatedBy",
                                    contentType: "application/json; charset=utf-8" ,
                                    type: "GET",
                                    dataType: "json"
                                }
                            },
                            schema: {
                                model: {
                                    fields: {
                                        Title: { type: "string" },
                                        CreatedBy:
                                        {
                                             FirstName: {type: "string" },
                                             LastName: {type: "string" },
                                        },
                                        Id: { type: "number" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 250,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        columns: [
                            { field: "Title" },
                            { field: "Id" },
                            {
                                   title: "Created By",
                                   template: kendo.template($("#NameTemplate").html())
                            } ]
                    });
});
</script>
</div>

The important change is

contentType: "application/json; charset=utf-8" ,
type: "GET",

answered on 25 Feb 2012, 03:06 AM

Can't get this to work now that I upgraded to the newest KendoUI version. Granted, it's probably that I can't find my edited kendo.data.odata.js file but perhaps not.

Anybody have an example of a working file and the js you used to get it to work? The error I get is

The query parameter '$callback' begins with a system-reserved '$' character

I realize I could go this route... http://archive.msdn.microsoft.com/DataServicesJSONP but isn't that for custom services? Not sure how to apply that Sharepoint's default web services.

Anyway, anybody using a recent kendo version with Sharepoint 2010 and have it working?

answered on 02 Mar 2012, 07:49 AM

Hi all,

I was able to get the data from a SharePoint as you all have suggested. I'm using the kendo.all.js with the soem changes (removing $format=json and call back)

Now i am trying to create a new record row and update the back end list. But when i click on Add new record, it gives and javascript error saying "Cannot read property '__count' of undefined" when i inspect my results received (json result from SharePoint service) i dont see a __count property there. Am i missing something here?
Simply i want to create a new record and update it in SharePoint back end, and also want to do update on existing items.

Thanks in advance for your all help.

answered on 02 Mar 2012, 05:29 PM

Hey all, I'm actually using the exact same code that Ashwat posted above. I'm also running the Q1 beta now and it's working fine.

Note -- You need to make sure to reference each kendo js file singularly. Note Rainer's post above.

Here's the end of mine...

extend(true, kendo.data, {

schemas: {

odata: {

type: "json",

data: "d.results",

total: "d.__count"

}

},

transports: {

odata: {

read: {

cache: true, // to prevent jQuery from adding cache buster

dataType: "jsonp",

// jsonp: "$callback"

},

parameterMap: function(options, type) {

type = type || "read";

var params = {

// $format: "json",

$inlinecount: "allpages"

},

option,

dataType = (this.options || defaultDataType)[type].dataType;

options = options || {};

for (option in options) {

if (mappers[option]) {

mappers[option](params, options[option]);

} else {

params[option] = options[option];

}

return params;

}

});

I use a content editor web part with a content link to reference a separate file. Here's what I have in that file..... EXACTLY, only modifying the URL.

<link href="/_layouts/assets/kendoui/styles/kendo.common.min.css" rel="stylesheet" />

<link href="/_layouts/assets/kendoui/styles/kendo.default.min.css" rel="stylesheet" />

<script src="/_layouts/assets/kendoui/source/js/jquery.js" type="text/javascript"></script>

<script src="/_layouts/assets/kendoui/source/js/jquery.tmpl.js" type="text/javascript"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.core.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.model.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.data.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.data.odata.js" type="text/javascript"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.grid.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.list.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.pager.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.sortable.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.filtermenu.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.popup.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.selectable.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.dropdownlist.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.numerictextbox.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.calendar.js"></script>

<script src="/_layouts/assets/kendoui/source/js/kendo.datepicker.js"></script>

<div id="grid"></div>

<script>

$(document).ready(function () {

var ds = new kendo.data.DataSource({

type: "odata",

transport: {

read: {

url: "http://www.someweburl.com/_vti_bin/listdata.svc/Documents",

dataType: "json"

},

schema: {

data: "d.results",

model: {

fields:

{

Title: { type: "string" },

Id: { type: "number" },

}

},

});

$("#grid").kendoGrid({

dataSource: ds,

columns:

[

{ field: "Title", title: "Title"},

{ field: "Id", title: "Id"},

],

});

</script>

The above looks at a document library called "Documents" and returns the Title and Id. You could point to a regular list instead. I highly recommend starting off by just pulling back Title, or Title and Id, just to make sure everything works. I also always start off using a grid, that way I know the datasource and JSON is correct.

answered on 24 Mar 2012, 11:39 AM

kendo-data-odatacors-js.zip

I have added crude support for updating(creating) OData JSON data sources by following steps in this thread for creating the odataCors data source and then configuring the update transport as such:

transports: {

odataCors: {

update: {

type: "POST",

dataType: "json",

data: "",

contentType: "application/json",

beforeSend: function(xhr, s) { s.data = JSON.stringify($.parseQueryString(s.data)); }

},

}

You then configure your data source:

var ds = new kendo.data.DataSource({

type: "odataCors",

transport: {

read: baseUri+"d/Contacts",

update: { url: baseUri+"d/Contacts" }

}

});

Full odataCors source included (bear in mind that it is just a really quick example, not full fledged working code...).

answered on 16 Sep 2012, 08:49 PM

I played around with this some today since I am getting involved a lot with SharePoint 2010. I used the shell from the demo for XML data to get me started and I can get results from the SharePoint list in XML feed format. I put my test page (kendoUIgrid.aspx) in the Site Assets to avoid cross domain issues and loaded scripts and styles likewise.

The problem comes when specifying the binding path for a field in the model when using schema.data: "/feed/entry".

I used "fields: { title: "content/m:properties/d:Title/text() ..." but this generates a error in the Kendo dataSource definition complaining of a missing ")". Of course, normal X-Path definitions work just fine. Just not when there's a namespace prefix as in "m" and "d" above. My guess us the colon (":") throws the kendo.expr() function generator a knuckle ball and it swings and misses.

If you don't have to use namespace prefixes the dataSource is happy as in id: "id/text()" which renders as the Url to the specific list item.

Can Telerik help us out on how to specify namespace prefixes for Xml return data?

answered on 10 Jun 2013, 05:13 AM

Hi
SP2013 works well with latest kendo build out of the box with no customizations.
For 2010, instead of modifying the Kendo api, I have found the following solution works with latest kendo build.

Add the following jquery code to your js.

$(document).ajaxSend(function (e, jqxhr, settings) {
if (settings.url.toLowerCase().indexOf("/_vti_bin/listdata.svc".toLowerCase()) >= 0) {
jqxhr.setRequestHeader("Accept", "application/json");
}
});

For a more detailed explanation, refer to this link https://community.dynamics.com/crm/b/zhongchenzhoustipstricksandportaldevelopment/archive/2012/05/20/how-to-use-kendo-ui-datasource-kendo-ui-grid-with-dynamics-crm-2011-rest-endpoint.aspx

It is relevant for MS Dynamics but works for SharePoint as well.