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());