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

Populate Second listview from first listview selected item.

0 Answers 122 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Devon
Top achievements
Rank 1
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">
<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???

No answers yet. Maybe you can help?

Tags
ListView (Mobile)
Asked by
Devon
Top achievements
Rank 1
Share this question
or