JointJS+ RadioGroup

ui.RadioGroup

ui.RadioGroup is a UI widget for displaying radio groups.

Installation

Include joint.ui.radioGroup.js and joint.ui.radioGroup.css files to your HTML:

<link rel="stylesheet" type="text/css" href="joint.ui.radioGroup.css">
<script src="joint.ui.radioGroup.js"></script>

Usage

Create an object of ui.RadioGroup type, render it with the render() method and append the generated HTML element anywhere in your DOM:

const radioGroup = new joint.ui.RadioGroup({
    name: 'myRadioGroup',
    options: [{
        content: 'Value 1',
        value: 1
    }, {
        content: 'Value 2',
        value: 2
    }, {
        content: 'Value 2',
        value: 2
    }]
});
document.body.appendChild(radioGroup.render().el);

Configuration

The following table lists options that you can pass to the ui.RadioGroup constructor function.

options

An array of options. Each option is an object with the following properties:

content	The content of the radio button label. Can be a simple string or a string with a custom html.
value	The value of the option. It can be a string, a number or any other JavaScript object.

name Name of the inner input element. By default it is set to the component's cid.

API

render()	Render the radio group. Note that once you render the color palette, you can use the `el` property that points to the container HTML element and append it anywhere in the DOM (e.g. `document.body.appendChild(radioGroup.el)`).
selectByValue(value)	Select an item in the radio group by its value.
select(index)	Select an item in the radio group by its index in the options array.
getCurrentValue()	Returns the current value of the radio group.
getSelectionIndex()	Returns the index value of the current value.
setOptions(options)	Sets new set of options to be rendered inside the radio group component.
remove()	Remove the radio group from the DOM.
on(event, handler [, context])	Register a `handler` function that will be called whenever `event` is triggered. The optional `context` is an object that will be the context of the handler function (the `this`).

Events

The ui.RadioGroup object triggers events that you can react on. Events can be handled by using the on() method (see above).

option:select	Triggered when the value of the radio group is selected. The handler passed the current value of the radio group as the first parameter. The second parameter is the RadioGroup object.