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

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

4 Answers 847 Views

ListView (Mobile)

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

Dan asked on 28 Jun 2012, 04:31 AM

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>

4 Answers, 1 is accepted

answered on 02 Jul 2012, 12:00 PM

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!

Accepted

answered on 06 Jul 2012, 11:21 AM

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