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

Populate Second listview from first listview selected item.

0 Answers 213 Views

ListView (Mobile)

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

Devon asked on 13 Aug 2012, 09:29 AM

Hi everyone.

I have a listview that is populated from a remote datasource. What I need to do is populate a second list with relevant data from the item selected from the first list.

I can do it by "re-populating"
the first list but this gives me errors later one when selecting something from the second list.

Long story short, I have a list of customers which is populated from an external datasource. Each customer record has an array of items "nested" within their data record. eg:

{
"ID": 3,
"Name": "Sarah Carlson",
"Telephone": "(011) 123 4567",
"Address": "1 Test ave",
"Suburb": "Test",
"City": "Testville",
"Province": "Gauteng",
"Country": "South Africa",
"PostalCode": "0001",
"DeliveryStatus": "Pending",
"Packages": [
{
"ID": 1,
"Name": "Package 1",
"Status": "Pending"
},
{
"ID": 2,
"Name": "Package 2",
"Status": "Pending"
}
]
}

What I need to do is, when the customer is selected, display a new list with the customer's packages on it with a combobox and a button for each package allowing the package status to be changed.

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Deliveries</title>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.mobile.min.js"></script>

<script src="js/console.js"></script>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

<body>

<a href="Index.html">Back</a>

<div data-role="view" id="listview-customers" data-init="showCustomerList" data-title="Customers">

<ul id="customer-listview">

</ul>

</div>

<div data-role="view" id="listview-packages" data-title="Packages">

<ul id="package-listview">

</ul>

</div>

<div data-role="layout" data-id="databinding">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a data-align="right" data-role="button" class="nav-button" href="Index.html">Home</a>

</div>

</header>

</div>

<script>

var id;

var packages;

var packageDataSource = new kendo.data.DataSource({

schema: {

model: {

id: "ID",

fields: {

Name: { type: "string" },

Status: { type: "string" }

}

});

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://localhost:8080/databases/shipping/docs",

dataType: "json",

data: {

q: "javascript"

}

},

schema: {

model: {

id: "id",

fields: {

Name: { type: "string" },

Telephone: { type: "string" },

Address: { type: "string" },

Suburb: { type: "string" },

City: { type: "string" },

Province: { type: "string" },

Country: { type: "string" },

PostalCode: { type: "string" },

DeliveryStatus: { type: "string" },

Packages: { type: "auto" }

}

});

function showCustomerList() {

{

$("#listview-customers").kendoMobileListView({

dataSource: dataSource,

template: kendo.template($("#customersTemplate").html()),

selectable: true,

click: function (e) {

packages = e.dataItem.Packages;

showPackageList();

//showButton();

}

});

}

function showPackageList() {

for (var a = 0; a < packages.length; a++) {

packageDataSource.add({

ID: packages[a].ID,

Name: packages[a].Name,

Status: packages[a].Status

});

}

$("#listview-customers").kendoMobileListView({

dataSource: packageDataSource,

template: kendo.template($("#packagesTemplate").html())

});

}

function saveChanges(e) {

var button = e.button,

item = packageDataSource.get(button.data("itemId"));

console.log(item);

}

</script>

<script type="text/x-kendo-template" id="customersTemplate">

<h3 class="item-title">${Name}</h3>

<p class="item-info">Status: ${DeliveryStatus}</p>

</script>

<script type="text/x-kendo-template" id="packagesTemplate">

<h3 class="item-title">${Name}</h3>

<p class="item-info">Status: ${Status}</p>

<select data-role="combobox">

<option value="Pending">Pending</option>

<option value="Delivered">Delivered</option>

<option value="Damaged">Damaged</option>

<option value="Refused">Refused</option>

</select>

<a data-role="button" data-item-id="#:id#" data-click="saveChanges" class="details-link">Save Changes</a>

</script>

</body>

</html>

I would really appreciate it if anyone could help me get this right???

Populate Second listview from first listview selected item.

No answers yet. Maybe you can help?