Read single row datasource into DIV

3 posts, 2 answers
  1. Answer
    Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 18 Mar 2013 Link to this post

    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
  2. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 19 Mar 2013 Link to this post

    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({
     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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Cliff Gibson
    Cliff Gibson avatar
    45 posts
    Member since:
    Oct 2009

    Posted 19 Mar 2013 Link to this post

    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
Back to Top