test

by Shrikrishna Gupta

HTML

<link rel="stylesheet" href="http://static-stage.maklarpaket.se/admin/css/jquery-ui-custom.css">
<script src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/1.13/src/jquery.multiselect.js"></script>
<link rel="stylesheet" href="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/1.13/jquery.multiselect.css">
<div>
    <p>Selected Items:</p>
    <select data-bind="options: sel, optionsText: 'label', multiselect: true" multiple="multiple"></select>
</div>
<br />

<div>
     <button data-bind="click: addItem">Add Item</button>
     <input id="text"  />
</div>
<div>
    <p>Items Array:</p>
    <select id="multi" data-bind="options: items, selectedOptions: sel, optionsText: 'label',  multiselect: true" multiple="multiple" ></select>
   
</div>

CSS

select {width: 400px;}

JavaScript

var data = { list:[
    {"label": "One", "value": "1"},
    {"label": "Two", "value": "2"}]}

var viewmodel = null;

function testobj() {
    this.items = ko.observableArray(data.list);
    this.sel = ko.observableArray(data.list);
    this.addItem = function() {
        var data = new item($("#text").val(), $("#text").val());
        this.items.push(data);
        this.sel.push(data);
    }
}

$(document).ready(function() {
    viewmodel = new testobj();
    ko.applyBindings(viewmodel);
    SetWidget();
});

function SetWidget() {
    $("#multi").multiselect({
        header: true,
        selectedText: "# of # selected",
        noneSelectedText: 'Allow any',
        selectedList: 2

    });
}

function item(n, v) {
    this.label = n;
    this.value = v;
}

ko.bindingHandlers.multiselect = {
    init: function (element) {
        $(element).bind("multiselectclick", function () {
            alert("hello");
            $.data(element, 'donotrefresh', true);
        });
    },
    update: function (element) {
        var doNotRefresh = !!($.data(element, 'donotrefresh'));
        if (!doNotRefresh) { $(element).multiselect("refresh"); }
        $.data(element, 'donotrefresh', false);
    }
};