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

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

6 Answers 303 Views

Data Source

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

Adis asked on 19 Jun 2012, 06:12 AM

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>

6 Answers, 1 is accepted

answered on 19 Aug 2012, 03:57 PM

Basic-ListView-External-Bind.zip

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

answered on 29 Aug 2012, 04:43 PM

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

answered on 30 Aug 2012, 12:24 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

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

6 Answers, 1 is accepted