List-view generated from data is not rendering

4 posts, 0 answers
  1. James
    James avatar
    16 posts
    Member since:
    Jan 2013

    Posted 20 Mar 2013 Link to this post

    Hi!

    I have a link which is typically a listview (can be a button too etc) that Kendo Mobile can't render its listview-look. I am querying data which contains the listview-link from the mobile's sqlite (synced from a remote CMS)

    Here in an example code:

    <div data-role="view" id="page-skade" data-title="" data-show="pageShow" data-model="pageViewModel">
            <h1 data-bind="text: title"></h1>
            <p data-bind="html: content"></p> <!-- THIS CONTENT IS QUERIED FROM SQLITE: CONTENT CONTAINS CORRECT FORMATED LISTVIEW LINK -->
    </div>


    Best regards,
    James
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Mar 2013 Link to this post

    Hello James,

    Direct replacement of the html or using the html binding will bypass widget initialization. Widgets will be build only if you use a source and template binding. You may source bind the paragraph to a non-array value or to the ViewModel itself. For you convenience I prepared a small example using this this approach in action. Please check it and let me know if it fits in your case.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. James
    James avatar
    16 posts
    Member since:
    Jan 2013

    Posted 22 Mar 2013 Link to this post

    Hi Alexander!

    Thanks for the reply. Basically it is a database related. We are using Wordpress as a Content Management System for the app. We sync data from it. The syncing works well both text and images.  I am storing them locally. 

    The scenario: Our app editors  wants to have a freedom of linking to somewhere else, either internal or external. That is why I created a [shortcode] for the links that will return a properly formated linkview. Everything works fine until syncing to the mobile app and rendering them into a view as link but they can't render as listview. Same as button as well. 

    Here is the js
    function firstAidShow(e) {
        var id = e.view.params.id;
        var db = openDB();
        var data = [];
        db.transaction(function(tx) {
            tx.executeSql('SELECT * from firstaid WHERE id = ' + id, [],
                function(tx, result) {
                     
                    for (var i = 0; i < result.rows.length; i++) {
                        data[i] = result.rows.item(i);
                    }
                    firstAidViewModel.setValues.call(firstAidViewModel, id, data);
                    kendo.init($("#page-firstaid"));
            });
        });
        e.view.scroller.reset(); // reset to page top
    }
     
    var firstAidViewModel = new kendo.observable({
        setValues: function(id, data) {
            var that = this;
            that.set("title", data[0].title);
            that.set("content", data[0].content);
        },
        title : "",
        content : ""
    });
    Here is the view
    <div data-role="view" id="page-firstaid" data-title="First Aid" data-show="firstAidShow" data-model="firstAidViewModel" >
         
            <header data-role="header">
                <div data-role="navbar">
                    <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                </div>
            </header>
             
            <h2 data-bind="text: title"></h2>
            <div data-bind="html: content" id="content-forstehjelp"></div> <!-- Somewhere in this content is where the link generated from wp shortcode that needs to be rendered as listview or a button -->

    </
    div>

    Hope there is a solution for this.

    best regards,
    James
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 26 Mar 2013 Link to this post

    Hello James,

    Direct replacement of the html or using the html binding will bypass widget initialization.
    I suggest you to use source binding with a template. As an example:
    <div data-bind="source: this" data-template="tmp" id="content-forstehjelp"></div>
     
    <script id="tmp" type="text/x-kendo-template">
        #= content #
    </script>

    In this way, widgets will be initialized every time when the "content" field changes.
    I hope this will help.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready