[Solved] Combining Views with a custom listview

[Jean-Marc]

I want to build an app based on the Telerik Views + Backend Services combined with some custom code.

The custom code is fetching JSONP data and should display it as a listview. The data is loaded properly, but nothing is displayed...

Any ideas why?

Here's my JS code:

01.'use strict';
02.
03.app.newsView = kendo.observable({
04.    onShow: function() {},
05.    afterShow: function() {}
06.});
07.app.localization.registerView('newsView');
08.
09.// START_CUSTOM_CODE_newsView
10.// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes
11.function dataSource_error(e) {
12.    console.log(e.status); // displays "error"
13.}
14.
15.var newsDataSource = new kendo.data.DataSource({
16.    transport: {
17.        read: {
18.            //
19.            url: "http://ginkeo.com/briefme/news.php",
20.            dataType: "jsonp"
21.        }
22.    }
23.});
24.
25.newsDataSource.bind("error", dataSource_error);
26.
27.// Need to figure out how to display the results now...
28.//newsView.set("dataSource", newsDataSource);
29.newsDataSource.read().then(function() {
30.    var view = newsDataSource.view();
31.    console.log(view[0].name); // displays "Soziologe..."
32.});
33.if(newsDataSource.data.length > 0){
34.    $("#news-list").kendoMobileListView({
35.        dataSource: newsDataSource,
36.        template: "<li>#: name #</li>"
37.    });
38.}else{
39.    console.log(JSON.stringify(newsDataSource.data));
40.}
41.// END_CUSTOM_CODE_newsView

 

And here's the HTML:

01.<div data-role="view" data-title="View" data-layout="main" data-model="app.newsView" data-show="app.newsView.onShow" data-after-show="app.newsView.afterShow" id="newsViewScreen" class="screen">
02.    <header data-role="header">
03.        <div data-role="navbar" class="header-text">
04.
05.            <span data-bind="text: strings.newsView.title"></span>
06.
07.        </div>
08.    </header>
09.
10.
11.    <!-- START_CUSTOM_CODE_newsView -->
12.    <!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->
13.
14.    <ul id="news-list"></ul>
15.    <!-- END_CUSTOM_CODE_newsView -->
16.</div>

[Tsvetina]

Hello Jean-Marc,

The reason why your ListView does not display is an incorrect if check:

if (newsDataSource.data.length > 0) {
    $("#news-list").kendoMobileListView({
        dataSource: newsDataSource,
        template: "<li>#: name #</li>"
    });
} else {
    console.log(JSON.stringify(newsDataSource.data));
}

You need to have braces after data:

if (newsDataSource.data().length > 0) {

Otherwise, you are checking length of a function and not the function result.

However, if you want to implement this using MVVM, you can only define the DataSource in the JavaScript and use declarative binding to create the ListView:

<div data-role="view" data-title="View" data-layout="main" data-model="app.newsView" data-show="app.newsView.onShow" data-after-show="app.newsView.afterShow"
    id="newsViewScreen" class="screen">
    <header data-role="header">
        <div data-role="navbar" class="header-text"> <span data-bind="text: strings.newsView.title"></span> </div>
    </header>
    <!-- START_CUSTOM_CODE_newsView -->
    <!-- Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes -->
    <ul id="news-list" data-role="listview" data-bind="source: dataSource" data-template="itemTemplate"></ul>
    <script type="text/x-kendo-template" id="itemTemplate">
        <span data-bind="text: name"></span>
    </script>
    <!-- END_CUSTOM_CODE_newsView -->
</div>

'use strict';

app.newsView = kendo.observable({
    onShow: function () { },
    afterShow: function () { }
});
app.localization.registerView('newsView');

// START_CUSTOM_CODE_newsView
// Add custom code here. For more information about custom code, see http://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes
function dataSource_error(e) {
    console.log(e.status); // displays "error"
}

var newsDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            //
            url: "http://ginkeo.com/briefme/news.php",
            dataType: "jsonp"
        }
    }
});

newsDataSource.bind("error", dataSource_error);


app.newsView.set("dataSource", newsDataSource);
// END_CUSTOM_CODE_newsView

With this implementation, the ListView displays on my side, with three new items in it. Give it a try and let me know if you have additonal questions.

Regards,
Tsvetina
Telerik by Progress

[Jean-Marc]

Excellent, the MVVM version works like a charm!