ListView not working with data-bind? Help...

5 posts, 1 answers
  1. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 27 Jun 2012 Link to this post

    When I use the ****  data-bind="source: datasource"  **** setting on a ListView within a Mobile View, I end up with all of my data on one long, single list item, instead of separate items.  What a I doing wrong?  Is this an inappropriate use of data-bind?  

    If I instead initiate the ListView separately in Javascript then it properly displays the items...  though we were trying to pass all of this through MVVM.  Is this not the right way to do this?

    <!DOCTYPE html>
    <html>
    <head>
        <script src="jquery.min.js" type="text/javascript"></script>
        <script src="kendo.all.min.js" type="text/javascript"></script>
        <link href="kendo.mobile.all.min.css" rel="stylesheet"
            type="text/css" />
        <link href="kendo.common.min.css" rel="stylesheet"
            type="text/css" />
        <link href="kendo.default.min.css" rel="stylesheet"
            type="text/css" />
    </head>
    <body>
        <div data-role="view" data-title="Home" id="vHome" data-transition="slide">
            <ul data-role="listview" data-style="inset">
                <li><a href="#vMyDatabase">This Breaks</a></li>
                <li><a href="#vMyDatabase2">This Works</a></li>
            </ul>
        </div>
        <div data-role="view" data-title="My Database" id="vMyDatabase">
            <ul id="lMyDatabase" data-role="listview" data-style="inset" data-template="tMyDatabase"
                data-bind="click: ShowCustomer, source: MyDatabase">
            </ul>
        </div>
        <div data-role="view" data-title="My Database" id="vMyDatabase2" data-init="initTest">
            <ul id="lMyDatabase2" data-role="listview" data-style="inset" data-template="tMyDatabase"
                >
            </ul>
        </div>
        <script id="tMyDatabase" type="text/x-kendo-template">
            <div style="font-weight:bold;">#= Name #</div>
            <div style="font-weight:normal;font-size:smaller">#= City #, #= State #</div>
            <div style="font-weight:normal;font-size:smaller">ID: #= ID #</div>
        </script>
        <script type="text/javascript">
     
            var TestData = [
                { Name: "Company A", City: "Phoenix", State: "AZ", ID: "00000001" },
                { Name: "Company B", City: "Los Angeles", State: "CA", ID: "00000002" },
                { Name: "Company C", City: "Santa Fe", State: "NM", ID: "00000003" },
                { Name: "Company D", City: "Boulder", State: "CO", ID: "00000004" },
                { Name: "Company E", City: "Seattle", State: "WA", ID: "00000005" },
                { Name: "Company F", City: "Portland", State: "OR", ID: "00000006" },
                { Name: "Company G", City: "San Diego", State: "CA", ID: "00000007" },
                { Name: "Company H", City: "Boise", State: "ID", ID: "00000008" }, 
            ];     
     
            var app = new kendo.mobile.Application($(document.body), {
                initial: "vHome"
            });
     
            var viewModel = kendo.observable({
     
                ShowCustomer: function(e) {
                    // something here for drilldown
                },
     
                MyDatabase: new kendo.data.DataSource.create({ data: TestData })
            });
     
            kendo.bind($("#vMyDatabase"), viewModel);
     
     
            // And this way works
             
            var dsMyDatabase = new kendo.data.DataSource.create({ data: TestData })
     
            function initTest() {
     
                $("#lMyDatabase2").kendoMobileListView({
                    dataSource: dsMyDatabase,
                    template: $("#tMyDatabase").text(),
                    style: "inset",
                    click: function (e) {
                        // something here for drilldown
                    }
                });
            }
        </script>
    </body>
    </html>

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Jul 2012 Link to this post

    Hi Dan,

    To achieve that I recommend using the model property of the mobile view that defines the MVVM model to bind to. For example:
    <div data-role="view" data-model="viewModel" data-title="My Database" id="vMyDatabase">
        <ul id="lMyDatabase"
            data-role="listview"
            data-style="inset"
            data-template="tMyDatabase"
            data-bind="source: MyDatabase, events: { click: ShowCustomer }">
        </ul>
    </div>

    To illustrate the approach I created a small demo.

    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. Dan
    Dan avatar
    124 posts
    Member since:
    Feb 2011

    Posted 02 Jul 2012 Link to this post

    Thank you!  The major difference between my code and your fix is that I was doing this:

    kendo.bind($("#vMyDatabase"), viewModel);

    And you instead did it in the view <div>

    <div data-role="view" data-title="My Database" id="vMyDatabase" data-model="viewModel">
        ... etc
    </div>

    In fact I have found that the first way (initializing it in Javascript) doesn't seem to work at all in my scenarios.  Can you confirm when each approach should be used and the difference?  
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 04 Jul 2012 Link to this post

    Hello Dan,

    I am glad that to hear the issue is resolved. The kendo.bind method is commonly used in KendoUI Web pages, while the recommended way to bind a mobile view to MVVM model is via the model configuration option.

    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!
  6. d2uX
    d2uX avatar
    16 posts
    Member since:
    Jul 2012

    Posted 06 Jul 2012 Link to this post

    Hi there,

    I have a similar issue with binding data to a list view nad since i didnt want to start a new thread I'm asking here.
    With the previous hints I got (at least) a soinner working which indicates that some data is being loaded.
    Nevertheless there's no data showing up in my list.

    I also tried to follow the MVVM-pattern, so here is my code for getting the data:
    var VProducts = new kendo.observable({
        list: new kendo.data.DataSource({
             transport: {
                read: {
                    url: "/get.php",
                    contentType: "application/json; charset=utf-8",
                    type: "GET",
                    dataType: "ajax",
                    data: {
                        type: "products"
                    }
                }
            },
            schema: {
                model: {
                    fields: {
                        name: 'name',
                        desc: 'desc',
                        price: 'price'
                    }
                }
            }
        })
    });



    In my html-file I am binding this to a list-view:
    <div data-role="view" data-title="Home" id="vHome" data-transition="slide" data-model="VProducts">
        <ul data-role="listview" data-style="inset" data-bind="source: list" data-template="TProducts">
        </ul>
    </div>

    <script id="TProducts" type="text/x-kendo-template">
            <li>
                    <div style="font-weight:bold;">#= name #</div>
                <div style="font-weight:normal;font-size:smaller">#= desc #</div>
                <div style="font-weight:normal;font-size:smaller">ID: #= price #</div>
             </li>
    </script>

     
    Additionally: Is there any way to "debug" such requests and see where it "hangs"? I can see that the json data (that the server responds) is correct, so I guess it's somewhere in the defined model (fields)!?
    And is there a way to separate the template from the actual html (defining it in the VProducts)? 

    Thx in advance
Back to Top
Kendo UI is VS 2017 Ready