radiogroup

The radiogroup control allows the user to select one option from a list of alternatives.

  • Extends basecontrol

    • Syntax 

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

    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 radiogroup.
    • 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 radiogroup 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 radiogroup control. The reference path string should be part of any dataset defined using the juci#addDataset method.