Knockout data-bind for bootstrap multiselect not selecting initial data

Question

i have an issue with the bootstrap-multiselect binder for knockout. The initial values of my array are not set as selected in dropdown.

Bellow is my index how i use the data-bind:

<table class="table">
                    <thead>
                        <tr>
                            <th>@Resource.Name</th>
                            <th>@Resource.Group</th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: ProjectsCollection">
                        <tr>
                            <td><input type='text' class='form-control' data-bind="value: ProjectCenterName"></td>
                            <td><select class="form-control" multiple="multiple" data-bind="options: $root.CompanyStructures, optionsText: 'CompanyStructureName', optionsValue: 'CompanyStructureId', selectedOptions: $data.ProjectCompanyStructures, multiselect: $root.multiSelectInitOptions"></select></td>
                            <td class="important">
                                <i class="fa fa-save" data-bind="click: $root.save"></i>
                            </td>
                            <td class="important">
                                <i class="fa fa-archive"></i>
                            </td>
                            <td class="important">
                                <i class="fa fa-trash"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>

I use the binding handler created by David Stutz and my view model looks like this:

function GetProjects() {
    // Ajax Call Get All ProjectCenter Records for a specific Company in database
    $.ajax({
        type: "GET",
        url: "/api/ProjectCenterApi/GetProjectsForCompany",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            ko.mapping.fromJS(data.ProjectsCenterModels, {}, self.ProjectsCollection);
            self.CompanyStructures(data.CompanyStructures); // Put the response in ObservableArray
        },
        error: function (error) {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });
    // Ends Here
}

I read that 'selectedOptions' need's to be an observable array, this is checked but even so the values are not selected.

The response from the ajax call is the following:

{"ProjectsCenterModels":
	[{"ProjectCenterId":1,
	"ProjectCenterName":
	"PnAweb",
	"ProjectCompanyStructures":
		[3]},
	{"ProjectCenterId":2,
	"ProjectCenterName":"Pna old",
	"ProjectCompanyStructures":
		[3,4]},
	{"ProjectCenterId":3,
	"ProjectCenterName":"Flint bugs",
	"ProjectCompanyStructures":
		[]}
	],
"CompanyStructures":
	[{"CompanyStructureId":3,
	"CompanyStructureName":"Not assigned"},
	{"CompanyStructureId":4,
	"CompanyStructureName":"Home"}
	]
}

I have the the projects in a foreach data-bind table and i need to link the projects to company structures. On save the selected company structures are updated and this ok, only the initial values are not displayed! Anyone encountered this situation? Tnx

Answer 1

You expect that using a jQuery gadget with ko makes it work automatically, and that's not possible.

To make it work you need to create a custom ko binding handler that initializes the gadget, and updates it when necessary. RP Niemeyer have great implementations of binders for different jQuery gadgets. You can have a look at this: http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html, where you'll find a good explanation of custom binders an an example of using the jQuery UI date picker:

ko.bindingHandlers.datepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    //initialize datepicker with some optional options
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

    //handle the field changing
    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).datepicker("destroy");
    });

  },
  //update the control when the view model changes
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).datepicker("setDate", value);
  }
};

You would use the binding like:

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

As you can see you need to initialize the gadget, dispose of the gadget, and notify it when there are changes in your observable.