Probably stupid but radder frustrating problem with binding json to Kendo Mobile

7 posts, 0 answers
  1. Adis
    Adis avatar
    1 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    Hi Guys,

    I have probably rather stupid, but still very frustrating problem with Kendo Datasource - particulary binding a remote service (json) to a list. I spent few hours yesterday reading, trying, experimenting - but to no avai, so this is my very last ressource...

    It's the following scenario: I want to take an existing Kendo Mobile Ui example, "Pull to Refresh", which comes in the example folders when Kendo mobile is downloaded, but can also be found online here, and instead of binding it to Twitter REST service (as shown in the example), to bind it to my own datasource - data from remote REST service.

    My service is located at:
    http://sharedove.cld.sr/sahreconf2012/_vti_bin/ShareDoveRestService/ShareDove.svc/anonymous/GetSessions

    So what I do with the original code is following:
    - Change service address to the one above
    - Change the name of the data field property from "results" (Twitter service) to "AllSessions" (my service)
    - Change the template to show one single field ("TrackName")

    What happens is following: In fiddler, I see my data loaded (hurray), with response code 200 (everything ok), but it just won't display (bind).

    Screenshot of the Chrome developer tools with the service response selected is here.

    So, I have no idea where does it go wrong. Everything looks plain and simple, I get my data, but it still would not show/bind.

    Any ideas from you, good people?

    Thanks!!

    A, of course, my full code is (this is the "Pull to Refresh" example, with few lines modified):

    <!DOCTYPE html>
    <html>
    <head>
        <title>Pull to refresh</title>
        <script src="../../../js/jquery.min.js"></script>
        <script src="../../../js/kendo.mobile.min.js"></script>
        <script src="../../content/shared/js/console.js"></script>
        <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
        <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    </head>
    <body>
        <a href="../index.html">Back</a>
        <div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
            </div>
        </header>
     
        <ul id="pull-to-refresh-listview"></ul>
    </div>
     
    <script id="pull-to-refresh-template" type="text/x-kendo-template">
        <div class="tweet">
            #= TrackName #
        </div>
    </script>
     
    <script>
        function mobileListViewPullToRefresh() {
                var lastID;
                var dataSource = new kendo.data.DataSource({
                    serverPaging: true,
                    transport: {
                        read: {
                            url: "http://sharedove.cld.sr/sahreconf2012/_vti_bin/ShareDoveRestService/ShareDove.svc/anonymous/GetSessions", // the remove service url
                            dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
                        },
                        parameterMap: function(options) {
                            var page = options.page;
                            var parameters = {
                                q: "javascript",
                                since_id: lastID //additional parameters sent to the remote service
                            }
     
                            return parameters;
                        }
                    },
                    change: function() {
                        var item = this.view()[0];
     
                        if (item) {
                            lastID = item.id_str;
                        }
                    },
                    schema: { // describe the result format
                        data: "AllSessions" // the data which the data source will be bound to is in the "results" field
                    }
                });
     
            $("#pull-to-refresh-listview").kendoMobileListView({
                dataSource: dataSource,
                pullToRefresh: true,
                appendOnRefresh: true,
                template: $("#pull-to-refresh-template").text()
            });
        }
    </script>
     
    <style scoped>
        .tweet {
            font-size: .8em;
            line-height: 1.4em;
        }
        .pullImage {
            width: 64px;
            height: 64px;
            border-radius: 3px;
            float: left;
            margin-right: 10px;
        }
        .sublink {
            font-size: .9em;
            font-weight: normal;
            display: inline-block;
            padding: 3px 3px 0 0;
            text-decoration: none;
            opacity: .8;
        }
    </style>
     
     
        <script>
            window.kendoMobileApplication = new kendo.mobile.Application(document.body);
        </script>
    </body>
    </html>
  2. Ran
    Ran avatar
    10 posts
    Member since:
    Jul 2012

    Posted 19 Aug 2012 Link to this post

    Hi,
    I am new to Kendo Mobile myself. attached is a mobile ListView binded to a (locally) external source.
    Hopefully this will set you up in the right direction
    Ran
     
  3. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 29 Aug 2012 Link to this post

    Hi Ran,

    I have the same problem, i which there would be a simple sample from Telerik to explain how to create your own REST service and exploit it using a Kendo Datasource.

    Have you managed to solve this meanwhile?

    Best Regards,

    Peter
  4. Ran
    Ran avatar
    10 posts
    Member since:
    Jul 2012

    Posted 29 Aug 2012 Link to this post

    Hi peter,
    isn't my above example what you are looking for? check it out...
     
  5. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 29 Aug 2012 Link to this post

    Hi Ran,

    I tried your sample, but it just reads an xml list.

    I'm struggling mostly with how you configure a datasource from kendo to read data from my own REST Service. As i debug the REST service i can see it is being called, but nothing happens on the return event, i must be configuring it wrongly or something else, but the document is completely insufficient for a novice to get anything done.

    All i want is to create a mobile app that exploits a REST service of my own making, a very simple sample will don here is what i have so far:

    $(document).ready(function() {
                 
                    var template = kendo.template($("#template").html());
                     
                    var dataSource = new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "http://localhost:50999/api/menu", // the remove service url
                                dataType: "jsonp", // JSONP (JSON with padding) is required for cross-domain AJAX
                            }
                        },
                        schema: { // describe the result format
                            data: "results" // the data which the data source will be bound to is in the "results" field                       
                        },
                        change: function () { // subscribe to the CHANGE event of the data source                       
                            alert(this.View());
                        }
                    });
     
                    // read data from the remote service
                    dataSource.read();              
                });

    The service is as simple as it can be:

    public class MenuController : ApiController
      {   
        public List<MenuView> Get()
        {
          ExqiFramework.Shell.Web.ExqiPresenterEntities epe = new ExqiFramework.Shell.Web.ExqiPresenterEntities();
     
          var menus = from menu in epe.MenuViews
                      orderby menu.Week, menu.Day, menu.MenuTypeEatingMomentId, menu.StartTime, menu.EndTime
                      where menu.CycleId == 1
                      select new MenuView()
                      {
                        Day = (short)menu.Day,
                        Week = (short)menu.Week
                      };
     
          return menus.ToList<MenuView>();
           
        }
      
    }

    The MenuView class:

    public class MenuView
    {
      public short Day { get; set; }
     
      public short Week { get; set; }
     
    }

    The service works, and it is being called, that i'm sure, because i have debugged it, but the alert(this.view()) is not called... so the output is somehow not processed, except that i don't understand why and the documentation gives me no pointers either.

    Best Regards,

    Peter
  6. Ran
    Ran avatar
    10 posts
    Member since:
    Jul 2012

    Posted 29 Aug 2012 Link to this post

    Hi Peter,
    My example is exactly that. consuming json from a Web-service into a mobile ListView.
    It is not XML. it is json, though simplified on purpose for simplicity.
    This is the code I used to really access a real REST JSON web-service.
    Same exact code with minor changes :)
    Take a second look...
     
     
  7. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 30 Aug 2012 Link to this post

    Hi Ran,

    Thanks for your continued interest, i can see following code:

    var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "json.txt",
                    dataType: "json",
                    data: {
                        q: "javascript"
                    }
                }
            },
            schema: {
                data: "results"
            }
     
        });


    As far as i can see, this just reads a local .txt file. I need to access an url. That's not even the biggest problem, i can solve that, my problem is that i don't seem to be able to get a return result that is actually processed, i see that the service is called but no output is processed by the datasource or transfered or whatever it should do.

    The datasource component is a very confusing component, it seems to have so many ways you can work with it and so many different ways to configure it, i just seem unable to make it work for me.

    Best Regards,

    Peter
Back to Top