jqxDropDownList with knockout cannot bind selectedvalue

Question

I am trying to bind a jqxDropDownList selected value with a ko.observable and I can't figure out what is wrong. It is working with regular <select> tags and it is not working with <div> element, as I am showing in the HTML bellow. I need to replace <select> with jqwidgets dropdownlist and bind accordingly as stated in the working code.

ViewModel:

var viewModel = function(){
    var self = this;
    self.patternSelectedIndex = ko.observable(0);
    self.windowSelectedIndex = ko.observable(0);
    self.colorSelectedIndex = ko.observable(0);
    self.hardwareSelectedIndex = ko.observable(0);
    self.selectedMake = ko.observable();
    self.selectedType = ko.observable();

    self.makes = [
            {id:1, name: 'Northwoods Prestige', dimensions:true},
            {id:2, name: 'Forest Bay', dimensions:true},
            {id:3, name: 'Timberland', dimensions:true}
    ];
    self.types = [
            {id: 1, make:1, name:'Special Reserve 138', patterns:[{file:'FB_Classic', name:'FB Clasic'},{file:'FB_Long', name:'FB Long'},{file:'FB_Flush', name:'FB Flush'}], colors:[{file:'Brown', name:'Brown'},{file:'Oak', name:'Oak'},{file:'Cherry', name:'Cherry'},{file:'Green', name:'Green'}], windows:[{file:'Cascade', name:'Cascade'},{file:'LongPanel', name:'LongPanel'},{file:'Plain', name:'Plain'},{file:'Savanna', name:'Savanna'},{file:'Sunburst', name:'Sunburst'},{file:'Sherwood', name:'Sherwood'}], hardware:[{file:'hardware1', name:'Strap Hinge'},{file:'hardware2', name:'Door Stud'},{file:'hardware3', name:'Lift Handle'}]},
            {id: 2, make:1, name:'Special Reserve II', patterns:[{file:'SR_81', name:'SR 81'}], colors:[{file:'Almond', name:'Almond'},{file:'White', name:'White'}], windows:[{file:'Heritage', name:'Colonial'},{file:'Cascade', name:'Cascade'}], hardware:[{file:'hardware1', name:'Strap Hinge'},{file:'hardware3', name:'Lift Handle'}]},
            {id: 3, make:2, name:'TF 138', patterns:[{file:'Rec_Carraige', name:'Rec Carraige'}], colors:[{file:'Green', name:'Green'}, {file:'Sepia', name:'Sepia'}], windows:[{file:'Cathedral', name:'Cathedral'},{file:'Cascade', name:'Cascade'}], hardware:[{file:'hardware1', name:'Strap Hinge'},{file:'hardware3', name:'Lift Handle'}]},
            {id: 4, make:2, name:'TF II', patterns:[{file:'Raised_Carriage', name:'Raised Carriage'}], colors:[{file:'Almond', name:'Almond'}], windows:[{file:'Cathedral', name:'Cathedral'},{file:'Cascade', name:'Cascade'}], hardware:[{file:'hardware1', name:'Strap Hinge'},{file:'hardware3', name:'Lift Handle'}]},
            {id: 5, make:3, name:'RP 25', patterns:[{file:'FB_Classic', name:'FB Classic'}], colors:[{file:'Cherry', name:'Cherry'}], windows:[{file:'Cathedral', name:'Cathedral'},{file:'Cascade', name:'Cascade'}], hardware:[{file:'hardware1', name:'Strap Hinge'},{file:'hardware3', name:'Lift Handle'}]},
            {id: 6, make:3, name:'LP 25', patterns:[{file:'FB_Long', name:'FB Long'}], colors:[{file:'Green', name:'Green'}], windows:[{file:'Cathedral', name:'Cathedral'},{file:'Cascade', name:'Cascade'}], hardware:[{file:'hardware1', name:'Strap Hinge'},{file:'hardware3', name:'Lift Handle'}]}
    ];
    self.doorTypes = ko.computed(function(){
        return ko.utils.arrayFilter(self.types, function(item){
            return item.make === self.selectedMake();
        });
    });
    self.matchingTypes = ko.computed(function () {
        return ko.utils.arrayFilter(self.doorTypes(), function (item, index) {
            return item.id === self.selectedType();
        });
    }); 
};
var model = new viewModel();
ko.applyBindings(model);

(not working): In the bellow markup there is no way of binding the value with selectedMake as in the working example *2.

<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name'}"></div>

2* HTML (working):

<select id="make" class="form-control select pull-left" data-bind="options: makes, value: selectedMake, optionsText : 'name', optionsValue : 'id'"></select>

Please take a look: jsfiddle.net/euto6vmj

Whoops, can you post the custom jqxDropDownList bindingHandler you are using? — Brad C, Jun 29 '15 at 18:59
Oh, I see... this jqxknockout that you are using contains the custom bindingHandlers. It looks like they only support setting the selected value by index so you will have to write a computed function to get the index — Brad C, Jun 29 '15 at 19:07
Fiddle helps a ton. So you want it selected for both make and type? — Brad C, Jun 29 '15 at 19:40

Brad C · Accepted Answer · 2015-06-29T19:46:54.797

0

It looks like jqxknockout only supports selecting items by array index, so you will need to add a function that grabs the currently selected index. Here are two functions that sync with your selectedMake and selectedType observables to get the selected index:

self.selectedMakeIndex = ko.computed(function() { 
    return self.makes.map(function(e) { return e.id; }).indexOf(self.selectedMake());
});

self.selectedTypeIndex = ko.computed(function() { 
    return self.types.map(function(e) { return e.id; }).indexOf(self.selectedType());
});

Every time you set the selectedMake() observable, these are automatically updated. Just use it in your data-bind:

<div id="make" data-bind="jqxDropDownList: {source: makes, autoDropDownHeight: true, height: 25, width: 200, displayMember : 'name', selectedIndex: selectedMakeIndex }"></div>

... and similar for type.

updated jsfiddle: http://jsfiddle.net/euto6vmj/1/

edited Jun 29 '15 at 19:46

answered Jun 29 '15 at 19:17

Brad C

2,868
22
33

Thank you before I mark it as answered, could you please take a look at this friddle, I can get the dropdoewn binded correctly to each other: http://jsfiddle.net/euto6vmj/2/ they should have same behaviour as previous ` – Diego P Jun 29 '15 at 22:43
Yeah I think youll have to use a [jqxDataAdapter](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/index.htm?%28arctic%29#demos/jqxdataadapter/bindingtojson.htm) since it provides no way to specify a separate value / optionsValue like in plain old knockout. In the dataadapter youll have to wire it up so that selectedMake() gets correctly populated – Brad C Jun 30 '15 at 00:58

jqxDropDownList with knockout cannot bind selectedvalue

1 Answers1