multiselectbox

The multiselectbox control allows the user to select one or more options from a list of alternatives. Only the selected value is displayed, tapping on the multiselectbox displays the list of options.

  • Extends selectbox

    • Syntax 

    <div data-juci="multiselectbox" data-label="Check out the options" data-bind="optionsList: options"></div>
    <div data-juci="multiselectbox" data-bind="optionsList: options"></div>
    <div data-juci="multiselectbox" data-label="Data bound" data-bind="optionsList: options, ref: simpleValue"></div>
    <div data-juci="multiselectbox" data-label="Data bound and disabled" data-bind="optionsList: options, ref: simpleValue" disabled></div>
    <div 
	data-juci="multiselectbox"
	data-label="Complex Data bound"
	data-bind="optionsList: complexOptions, optionsText: function(item){return item.name}, ref: complexValue"
	data-comparator="complexComparator"></div>
    <div 
	data-juci="multiselectbox"
	data-label="Complex Data bound with option templating"
	data-bind="optionsList: complexOptions, ref: complexValue"
	data-comparator="complexComparator">
		<div data-juci="optiontemplate">
			<label data-bind="display: 'Name is ' + name()"></label>
		</div>
</div>
    juci.addDataset("complexValue", {value: "1", name: "red"});
juci.addDataset("simpleValue", "red");
juci.addDataset("options", ["red", "blue", "green"]);
juci.addDataset("complexOptions", [{name:"red", value: "1"}, {name: "blue", value: "2"}, {name: "green", value: "3"}]);
    function complexComparator(i1, i2){
	return i1.value == i2.value;
}
    Remarks:
    data-juci="optiontemplate" can be used to create a custom option template.

    Attributes

    • data-juci {String} ΒΆ
      A string with value multiselectbox.

    Methods

    Events