Read single row datasource into DIV

[Cliff Gibson]

Hi

I've got the URL below which always returns a single record.  How do I return the Content field and update the html of a div on the page?

http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent?BookMenuID=4

Returns:
{"BookMenuID":4,"Content":"<span>DSDM advocates........"}

I've tried the code below so far (amongst many others) but the alert shows "undefined" as the result...

var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent?BookMenuID=4", // the remove service url
                                dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
                                  }
                            }
                        });

            dataSource.read();

            alert(dataSource.length);

            var dataItem = dataSource[0];
            $('#divContent').html(dataItem.Content);

Cheers
Cliff

[Nikolay Rusev]

Hello Cliff,

The correct way to retrieve the data from the DataSource is to handle change event and work with what view method returns as data. Here is how the code should look:

var dataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent?BookMenuID=4", // the remove service url
        dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
      }
    },
    change: function() {
      var view = this.view();

      $("#my div id").html(view[0].Content);
    }
  });

  dataSource.read();

 

In such a simple scenario I wouldn't recommend you using the DataSource as using it doesn't bring much value than a simple jQuery.ajax call. It is what the DataSource does internally. Here is how it will look by simple using jQuery.ajax:

$.ajax({
 url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent?BookMenuID=4",
 dataType: "jsonp",
 success: function(data, textStatus, jqXHR) {
  //manipulate the `data` from the server response
 }
});

One thing to notice here is that currently(in both cases) you are issuing a JSONP request to the server, but the response is not properly formatted and JavaScript error is thrown when the response is received(you can inspect browser console to see it).

Here are few articles on how CORS works:
http://docs.kendoui.com/howto/use-cors-with-all-modern-browsers
http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx
http://weblogs.asp.net/rashid/archive/2007/09/28/implement-jsonp-in-your-asp-net-application.aspx
http://json-p.org/

All the best,

Nikolay Rusev
the Telerik team

[Cliff Gibson]

Hi Nikolay

Thank you for your excellent response, I'm going through the learning curve moving from c# and server side code to Kendo/jQuery/REST/jSON etc and these small snippets of information are excellent to help me out.

Cheers
Cliff