Combining Views with a custom listview

3 posts, 1 answers
  1. Jean-Marc
    Jean-Marc avatar
    17 posts
    Member since:
    May 2016

    Posted 16 Jan Link to this post

    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>
  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 19 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Jean-Marc
    Jean-Marc avatar
    17 posts
    Member since:
    May 2016

    Posted 19 Jan in reply to Tsvetina Link to this post

    Excellent, the MVVM version works like a charm!
Back to Top