checkboxgroup

The checkboxgroup control allows the user to select one or more options from a list of alternatives. data-juci="optiontemplate" can be used to create a custom option template. The value of the control is an Array of selected options

  • Extends basecontrol

    • Syntax 

    <div data-juci="checkboxgroup" data-label="Check out the options" data-bind="optionsList: options"></div>
    <div data-juci="checkboxgroup" data-bind="optionsList: options"></div>
    <div data-juci="checkboxgroup" data-label="Data bound" data-bind="optionsList: options, ref: simpleValue"></div>
    <div data-juci="checkboxgroup" data-label="Data bound and disabled" data-bind="optionsList: options, ref: simpleValue" disabled></div>
    <div 
	data-juci="checkboxgroup"
	data-label="Complex Data bound"
	data-bind="optionsList: complexOptions, optionsText: function(item){return item.name}, ref: complexValue"
	data-comparator="complexComparator"></div>
    <div 
	data-juci="checkboxgroup"
	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;
}

    Attributes

    • data-comparator {String}
      Name of function defined on the window scope. Called when a value is compared with each option available in the options list. The function receives the values compared as parameters.
    • data-juci {String}
      A string with value checkboxgroup.
    • data-bind {Object} 
      data-bind="ref: someKey, optionsList: list"
      • optionsText {Function}
        A function that is invoked for each item in the array referred by optionsList. This function is the perfect place to edit the text in case if the item is a string/number or choose the property which contains the text in case of the item is an object. The function must return the text that should display as an item in the checkboxgroup control. The function receives the following parameter as input,
        • item {Object}
          Parameter for optionsText method. A string or number or object that displays as an item in the checkboxgroup control.
      • ref {String}
        A string containing the reference path from a dataset defined using the juci#addDataset method. The value of the key referred by this path bounds as value of the control.
      • optionsList {Array}
        A string reference pointing to an array of numbers or strings or objects to display as options in the checkboxgroup control. The reference path string should be part of any dataset defined using the juci#addDataset method.

    Methods

    Events