Populate Second listview from first listview selected item.

1 posts, 0 answers
  1. Devon
    Devon avatar
    28 posts
    Member since:
    Aug 2012

    Posted 13 Aug 2012 Link to this post

    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???
Back to Top