Not able to databind usinf knockout for nested dropdown

[Dheeraj Dhondalkar]

Hi,
I am new to knockout databinding. I have suceessfully tried and used databinding for table and it worked fine.
However, when i am trying to use it for dropdown, Igot stuck.  I dont know where I am making mistake. Values in Customer dropdown are getting populated but on select, product list is not showing up!!
Pl help.

here is my data:

var mydata = {
  "customers": [
    {
      "assignedToEmployees": [
        {
          "employeeName": "Bi Driya",
          "phone1": "8764839",
          "phone2": "",
          "rank": 1
        },
        {
          "employeeName": "Ravi  Ratre",
          "phone1": "56675757",
          "phone2": "",
          "rank": 2
        }
      ],
      "customerEmployeeList": [
        "a",
        "n"
      ],
      "customerName": "test1",
      "customerProductList": [
        {
          "custItemSerialNumber": "Temp/AC3381",
          "custItemStatus": "Working",
          "make": "ACME",
          "model": "AC",
          "product": "BSjhjT1",
          "productCategory": "AC",
          "productInstalledDate": "2012-09-09"
        },
        {
          "GIssueList": [],
          "SLA": [],
          "custItemSerialNumber": "Temp/Rect3419",
          "custItemStatus": "Working",
          "make": "AEG",
          "model": "REC",
          "product": "Dfhgfg00W",
          "productCategory": "REC",
          "productInstalledDate": "2012-09-01"
        },
        {
          "GIssueList": [],
          "SLA": [],
          "custItemSerialNumber": "Temp/PP5412",
          "custItemStatus": "Working",
          "idCustEmployee": "",
          "idCustItem": "1426",
          "idItem": "1182",
          "make": "TC",
          "model": "PP",
          "product": "DEPP21E6KWA1",
          "productCategory": "PMU",
          "productInstalledDate": "2012-01-09"
        }
      ],
      "siteID": "MAPQGL0617",
      "state": "MP",
      "zone": "W"
    },
    {
      "address1": "Lajjabati W/o.Mataprashad 504/1 Gali No 2 Ba",
      "address2": "ji Nagar Ater Road Bhind",
      "assignedToEmployees": [
        {
          "employeeName": "Binesh Singh null Dadoriya",
          "idEmployee": 1,
          "phone1": "7389927840",
          "phone2": "",
          "rank": 1
        },
        {
          "employeeName": "Ravi null Singh Rathore",
          "idEmployee": 19,
          "phone1": "918349996307",
          "phone2": "",
          "rank": 2
        }
      ],
      "circle": "MP",
      "city": "ji Nagar Ater Road Bhind",
      "cluster": "MP_Bhind",
      "customerAddressType": "GBT ID",
      "customerEmployeeList": [],
      "customerName": "Viom Networks",
      "customerProductList": [
        {
          "GIssueList": [],
          "SLA": [],
          "custItemSerialNumber": "Temp/AC3062",
          "custItemStatus": "Working",
          "idCustEmployee": "",
          "idCustItem": "1213",
          "idItem": "11",
          "make": "ACME",
          "model": "AC",
          "product": "BSAC2T001",
          "productCategory": "AC",
          "productInstalledDate": "2012-09-09"
        },
        {
          "GIssueList": [],
          "SLA": [],
          "custItemSerialNumber": "Temp/PP5070",
          "custItemStatus": "Working",
          "idCustEmployee": "",
          "idCustItem": "1212",
          "idItem": "1176",
          "make": "TC",
          "model": "PP",
          "product": "DEPP16KWA1",
          "productCategory": "PMU",
          "productInstalledDate": "2012-01-09"
        },
        {
          "GIssueList": [],
          "SLA": [],
          "custItemSerialNumber": "Temp-MP279120054",
          "custItemStatus": "Working",
          "idCustEmployee": "",
          "idCustItem": "1215",
          "idItem": "865",
          "make": "LAMBDA",
          "model": "PACE",
          "product": "LBPMU15KVA",
          "productCategory": "PMU",
          "productInstalledDate": "2012-09-09"
        },
        {
          "GIssueList": [],
          "SLA": [],
          "custItemSerialNumber": "Temp/Rect3070",
          "custItemStatus": "Working",
          "idCustEmployee": "",
          "idCustItem": "1217",
          "idItem": "1279",
          "make": "AEG",
          "model": "REC",
          "product": "DERECT2000W",
          "productCategory": "REC",
          "productInstalledDate": "2012-09-01"
        },
        {
          "GIssueList": [],
          "SLA": [],
          "custItemSerialNumber": "Temp/BB3070",
          "custItemStatus": "Working",
          "idCustEmployee": "",
          "idCustItem": "1216",
          "idItem": "124",
          "make": "AR",
          "model": "BB",
          "product": "ARBTR6000008",
          "productCategory": "BB",
          "productInstalledDate": "2012-09-09"
        },
        {
          "GIssueList": [],
          "SLA": [],
          "custItemSerialNumber": "Temp/DG3070",
          "custItemStatus": "Working",
          "idCustEmployee": "",
          "idCustItem": "1214",
          "idItem": "389",
          "make": "AL",
          "model": "DG",
          "product": "SNDG20KVA1",
          "productCategory": "DG",
          "productInstalledDate": "2012-09-09"
        }
      ],
      "customerType": "Customer",
      "district": "Bhind",
      "fetchedDateandtime": "2015-04-27T16:41:24.608+05:30",
      "idCustAddress": "2995",
      "idCustomer": "237",
      "idEmployee": "1",
      "siteID": "MAPBHI0596",
      "siteLatitude": "26.57508056",
      "siteLongitude": "78.78033056",
      "state": "MP",
      "zone": "W"
    }
  ],
  "enquiryDate": "2015-04-27T16:41:24.608+05:30",
  "serviceTypes": [],
  "ticketStatus": [
    "Cleared",
    "Open",
    "Close",
    "Out of scope",
    "Rejected",
    "Accepted"
  ]
}

here is html
<fieldset>
                            <legend>Customer:</legend>

                            <label  ><strong>Customer Name:</strong></label><br />
                            <select data-bind="options: customerList, value: selectedCustomer, optionsText : 'CustomerName', optionsCaption : 'Select your customerName'"></select><br />
                            <label  ><strong>Site ID:</strong></label><br />
                            <input data-bind="SiteID" class="inp-text" id="siteid" type="text" size="30" disabled/><br />
                            <label  ><strong>Product:</strong></label><br />
                            <select data-bind="options: productList, value: selectedProduct, optionsText : 'Product', optionsCaption : 'Select Product'"></select><br />
                            <label for="input-two" class="floatX"><strong>Product Status:</strong></label><br />
                            <input data-bind="CustItemStatus" class="inp-text"  type="text" size="30" disabled/><br />
                            <label  ><strong>Product Serial Number:</strong></label><br />
                            <input data-bind="CustItemSerialNumber" class="inp-text" id="serialNo" type="text" size="30" disabled/><br />
                        </fieldset>
When user selectes customer, corresponding products should be shown as well as selected customer siteId shd be shown .

here is my model

                                var mydata = getjson("custdata");
                                var today = new Date();
                                var someDate = new Date();
                                var numberOfDaysToAdd = 3;
                                someDate = someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
                                //fill our models with example data
                                function buildTicketStatus() {
                                    var i;
                                    var self = this;
                                    var ticketStatusList = new Array();
                                    for(i=0;i<mydata.ticketStatus.length;i++){
                                        ticketStatusList.push(new tktList(mydata.ticketStatus[i]));
                                    }
                                    return ticketStatusList;
                                }
                                function tktList(tkt){
                                    var self = this;
                                    self.TicketStatus = tkt;
                                }
                               
                                function buildServiceTypes() {
                                    var i;
                                    var self = this;
                                    var serviceTypes = new Array();
                                    for(i=0;i<mydata.serviceTypes.length;i++)
                                        serviceTypes.push(new serviceTypesData(mydata.serviceTypes[i]));
                                    return serviceTypes;
                                }
                                function serviceTypesData(serv){
                                    var self = this;
                                    self.fetchedDateandtime=serv.fetchedDateandtime;
                                    self.idVisitType=serv.idVisitType;
                                    self.VisitType=serv.visitType;
                                }
                                function buildCustomerData(){
                                    var self = this;
                                    var customers = new Array();
                                    var i;
                                    for(i = 0;i<mydata.customers.length;i++){
                                        customers.push(new customerOption(mydata.customers[i]));
                                    };
                                    self.customerList.subscribe(function() {
                                            self.CustomerProductList(undefined);
                                        });
                                    return customers;
                                }
                                var customerOption = function (data) {
                                    var self = this;
                                    self.CustomerName = (data.customerName !== undefined ? data.customerName : "");
                                    self.SiteID = (data.siteID  !== undefined ? data.siteID : "");
                                   
                                    self.Address1 = (data.address1  !== undefined ? data.address1 : "");
                                    self.Address2 = (data.address2  !== undefined ? data.address2 : "");
                                    self.City = (data.city  !== undefined ? data.city : "");
                                    self.District = (data.district  !== undefined ? data.district : "");
                                    self.Zone = (data.zone  !== undefined ? data.zone : "");
                                    self.Circle = (data.circle  !== undefined ? data.circle : "");
                                    self.Cluster = (data.cluster  !== undefined ? data.cluster : "");
                                    self.State = (data.state  !== undefined ? data.state : "");
                                    self.ZipCode = (data.zipCode  !== undefined ? data.zipCode : "");
                                    self.SiteLatitude = (data.siteLatitude  !== undefined ? data.siteLatitude : "");
                                    self.SiteLongitude = (data.siteLongitude  !== undefined ? data.siteLongitude : "");
                                    self.CustomerAddressType = (data.customerAddressType  !== undefined ? data.customerAddressType : "");
                                    self.CustomerType = (data.customerType  !== undefined ? data.customerType : "");
                                    var asemp = (data.assignedToEmployees  !== undefined ? data.assignedToEmployees : new Array());
                                    var i;
                                    self.AssignedToEmployees = new Array();
                                    for(i=0;i<asemp.length;i++){
                                        self.AssignedToEmployees.push(new assignedEmpList(asemp[i]));
                                    }
                                    self.CustomerEmployeeList = new Array();
                                    var custemp=(data.customerEmployeeList  !== undefined ? data.customerEmployeeList : new Array());
                                    var j;
                                    for(j=0;j<custemp.length;j++){
                                        self.CustomerEmployeeList.push(new custempList(custemp[j]));
                                    }
                                    var prodlist = (data.customerProductList  !== undefined ? data.customerProductList : new Array());
                                    var k;
                                    self.CustomerProductList = new Array();
                                    for(k=0;k<prodlist.length;k++){
                                        self.CustomerProductList.push(new productOptions(prodlist[k]));
                                    }
                                   
                                }
                                function productOptions(product){
                                    var self = this;
                                    self.idItem = product.idItem;
                                    self.idCustItem =product.idCustItem;
                                    self.ProductCategory=product.productCategory;
                                    self.Make=product.make;
                                    self.Model=product.model;
                                    self.Product=product.product;
                                    self.CustItemStatus=product.custItemStatus;
                                    self.CustItemSerialNumber=product.custItemSerialNumber;
                                    self.ProductInstalledDate=product.productInstalledDate;
                                    self.idCustEmployee=product.idCustEmployee;
                                   
                                    var gl = (product.GIssueList !== undefined ?product.GIssueList : new ArrayList());
                                    self.GIssueList = new Array();
                                    var i;
                                    for(i=0;i<gl.length;i++){
                                        self.GIssueList.push(new giList(gl[i]));
                                    }
                                   
                                    var sla = (product.SLA !== undefined ?product.SLA : new ArrayList());
                                    self.SLA = new Array();
                                    for(i = 0;i<sla.length;i++){
                                        self.SLA.push(new slaList(sla[i]));
                                    }
                                }
                                function giList(gi){
                                    var self = this;
                                    self.glCode=gi.glCode;
                                    self.glDesc=gi.glDesc;
                                    self.idGl=gi.idGl;
                                }
                                function slaList(sl){
                                    var self = this;
                                    self.SLADescription=sl.sLADescription;
                                    self.idSLA=sl.idSLA;
                                    self.StartDate=sl.startDate;
                                    self.EndDate=sl.endDate;
                                    self.ServiceType=sl.serviceType;
                                    self.Days=sl.days;
                                    self.Month=sl.month;
                                    self.Hours=sl.hours;
                                    self.Minutes=sl.minutes;
                                }
                                function assignedEmpList(emp){
                                    var self = this;
                                    self.idEmployee = emp.idEmployee;
                                    self.EmployeeName= emp.EmployeeName;
                                    self.Rank= emp.Rank;
                                    self.Phone1= emp.Phone1;
                                    self.Phone2= emp.Phone2;
                                }
                                function custempList(custemp){
                                    var self = this;
                                    self.CustomerEmployeeName=custemp.CustomerEmployeeName;
                                    self.CustEmpPhone=custemp.CustEmpPhone;
                                    self.CustEmpEmail=custemp.CustEmpEmail;
                                    self.CustEmpDesignation=custemp.CustEmpDesignation;
                                    self.idCustAddress=custemp.idCustAddress;
                                    self.idCustEmployee=custemp.idCustEmployee;
                                }
                               
                               
                                var viewModel = function () {
                                    var self = this;
                                   
                                    self.customers = ko.observable();
                                    self.products = ko.observable();
                                    self.sLAs = ko.observable();
                                    self.assignedToEmployees = ko.observable();
                                    self.customerEmployees = ko.observable();
                                    self.customerList = ko.observableArray(buildCustomerData());
                                    //Customer fields
                                    self.idCustAddress = ko.computed(function () {
                                        return self.selectedCustomer !== undefined ? self.selectedCustomer.idCustAddress : "";
                                    });
                                    self.idCustomer = ko.computed(function () {
                                        return self.selectedCustomer !== undefined ? self.selectedCustomer.idCustomer : "";
                                    });
                                    self.SiteID = ko.computed(function () {
                                        return self.selectedCustomer !== undefined ? self.selectedCustomer.SiteID : "";
                                    });
                                    //product fields
                                    self.idItem = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.idItem : "";
                                    });
                                    self.idCustItem = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.idCustItem : "";
                                    });
                                    self.ProductCategory = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.ProductCategory : "";
                                    });
                                    self.Make = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.Make : "";
                                    });
                                    self.Model = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.Model : "";
                                    });
                                    self.Product = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.Product : "";
                                    });
                                    self.CustItemStatus = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.CustItemStatus : "";
                                    });
                                    self.CustItemSerialNumber = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.CustItemSerialNumber : "";
                                    });
                                    self.ProductInstalledDate = ko.computed(function () {
                                        return self.selectedProduct !== undefined ? self.selectedProduct.ProductInstalledDate : "";
                                    });
                                    //Assign emp fields
                                    self.idEmployee = ko.computed(function () {
                                        return self.selectedAssignedToEmployees !== undefined ? self.selectedAssignedToEmployees.idEmployee : "";
                                    });
                                    self.EmployeeName = ko.computed(function () {
                                        return self.selectedAssignedToEmployees !== undefined ? self.selectedAssignedToEmployees.EmployeeName : "";
                                    });
                                    self.Rank = ko.computed(function () {
                                        return self.selectedAssignedToEmployees !== undefined ? self.selectedAssignedToEmployees.Rank : "";
                                    });
                                    self.Phone1 = ko.computed(function () {
                                        return self.selectedAssignedToEmployees !== undefined ? self.selectedAssignedToEmployees.Phone1 : "";
                                    });
                                    self.Phone2 = ko.computed(function () {
                                        return self.selectedAssignedToEmployees !== undefined ? self.selectedAssignedToEmployees.Phone2 : "";
                                    });
                                    //Customer Employee Fields
                                    self.CustomerEmployeeName = ko.computed(function () {
                                        return self.selectedCustomerEmployee !== undefined ? self.selectedCustomerEmployee.CustomerEmployeeName : "";
                                    });
                                    self.CustEmpPhone = ko.computed(function () {
                                        return self.selectedCustomerEmployee !== undefined ? self.selectedCustomerEmployee.CustEmpPhone : "";
                                    });
                                    self.CustEmpEmail = ko.computed(function () {
                                        return self.selectedCustomerEmployee !== undefined ? self.selectedCustomerEmployee.CustEmpEmail : "";
                                    });
                                    self.CustEmpDesignation = ko.computed(function () {
                                        return self.selectedCustomerEmployee !== undefined ? self.selectedCustomerEmployee.CustEmpDesignation : "";
                                    });
                                    self.idCustEmployee = ko.computed(function () {
                                        return self.selectedCustomerEmployee !== undefined ? self.selectedCustomerEmployee.idCustEmployee : "";
                                    });

                                    self.TargetDate = ko.observable(new Date());
                                    self.FirstPlanVisit = ko.observable(new Date());
                                    self.ComplaintDescription = ko.observable("");
                                    self.ReportingPersonName = ko.observable("");
                                    self.ReportingPersonPhoneNumber = ko.observable("");
                                    self.CustEmpdesig = ko.observable("");
                                    self.ReportingDate = ko.observable(today);
                                    self.ReportedTime = ko.observable("");
                                    self.Remark = ko.observable("");

                                    self.TicketStatus = buildTicketStatus();
                                    self.selectedTicketStatus = ko.observable("");
                                    self.ServiceTypes = buildServiceTypes();
                                    self.selectedServicetypes = ko.observable("");
                                   
                                   
                                };
                                self.productList = ko.computed(function () {
                               
                                    if(self.selectedCustomer === undefined || self.selectedCustomer.CustomerProductList === undefined )
                                        return null;
                                    else
                                    return  self.selectedCustomer.CustomerProductList ;
                                });

                                self.assignedEmp = ko.computed(function () {
                                    return  self.selectedCustomer !== undefined ? self.selectedCustomer.AssignedToEmployees : null;
                                });
                                self.custEmpList = ko.computed(function () {
                                    return self.selectedCustomer !== undefined ? self.selectedCustomer.CustomerEmployeeList : null;
                                });
                               
                                ko.applyBindings(new viewModel());

[Noirabys]

Hi,

you have to use ko.observable, ko.observableArray to archive automatic updates of the gui, otherwise knockout doesn't have a clue whats going on

check the manual for observable/observableArray and computed

greetings,

 noirabys

...