OData, Kendo DataSource and AJAX

Recently I have been using KenoUI with SharePoint.  

Here is how I got a datasource to work with the listdata.svc.

 

  function myDS() {

            var serviceUrl = "_vti_bin/listdata.svc/MyList?$select=Title";
            var dataSource = new kendo.data.DataSource({
            type: "odata",
              transport: {
                read:  {
                  url: serviceUrl,
                  dataType: "json" 
                },
              },
              schema: {
                model: { 
                        Id: "Id",
                        fields: {
                             Title: { type: "string" }
                    }
                }
              },
                error: function (e) {
                    var response = JSON.parse(e.responseText);
                    alert(response.error.message.value);
                }
             });
        return dataSource;
    }
 
/* The following update worked well */
var locationOdataUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Locations')/items?$select=Id,Full_x0020_Location&$orderby=Title,Postcode";
 $("#locationSelector").kendoDropDownList({
                        dataTextField: "Full_x0020_Location",
                        dataValueField: "Id",
                        autoBind: false,
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: {
                                    url: locationOdataUrl,
                                    beforeSend: function (xhr) { xhr.setRequestHeader('accept', 'application/json;odata=verbose'); },
                                    dataType: "json"
                                }
                            },
                            schema: {
                                model: {
                                    Id: "Id",
                                    fields: {
                                        Title: { type: "string" }
                                    }
                                }
                            }
                        },
                        index: 0,
                        change: onChange
                    });
 
 

 

However, this was still problematic.  In some cases I reverted to a standard jQuery.ajax call.

Here is an example:

	function loadOData() {
            //Ajax call to load divisions into model
            var serviceUrl = "_vti_bin/listdata.svc/SomeLookupList?$select=Title&$orderby=Order asc";
            var data = new Array();
            $.ajax({
                type: "GET",
                contentType: "application/json",
                dataType: "json",
                url: serviceUrl,
                success: function(result) {
                    //alert(JSON.stringify(result));
                    for(var i = 0; i < result.d.results.length; i++)
                    {
                        data.push({ Title: result.d.results[i].Title });
                    }
                }
            });
        }

The above script is used with a SharePoint list with the following fields:

  • Title
  • Order

The fact that we can place the sorting on the request URL is pretty cool and saves time.

 

CodeMonkey Software is a division of JCHMedia www.jchmedia.com