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:
I would really appreciate it if anyone could help me get this right???
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???