RadioGroup

A widget that enables a user to select one item within a list of items represented by radio buttons.

Type: Object

The dxRadioGroup widget provides a set of options displayed as radio buttons. Selecting one radio button deselects any previously selected radio button. To create the dxRadioGroup widget, add a div element with dxRadioGroup Knockout binding within the body of the required view.

HTML
<div data-bind="dxRadioGroup:{dataSource: [
        { text: 'Tea' },
        { text: 'Coffee' },
        { text: 'Juice' }
    ],
    layout:'vertical', selectedIndex: 1}">
</div>

The radio group items are loaded from an array specified via the dataSource configuration option. You can specify a simple array or the array of objects as the widget data source.

JavaScript
var employees = [
    { name: "Bob", hired: 2005 },
    { name: "John", hired: 2007 },
    { name: "Frank", hired: 2001 },
];

To display radio group items, a default template is applied based on the following fields of the data source item objects.

  • disabled - specifies whether or not the lookup item is disabled.
  • visible - specifies whether or not the lookup item is visible.
  • html - specifies the html code inserted into the item element.
  • text - specifies the text inserted into the item element.

You can introduce a custom template for lookup items. For this purpose, add a div element with the data-options attribute set to dxTemplate. Assign item to the template name. In this instance, this template will be applied automatically. See the Customize Widget Item Appearance topic to learn more about templates.

HTML
<div data-bind="dxRadioGroup:{dataSource: employees}">
    <div data-options="dxTemplate: {name: 'item'}">
        <span data-bind="text: name"></span> (hired at <span data-bind="text: hired"></span>)
    </div>
</div>

Refer to the Add a Widget documentation section to learn how to create widgets in detail.

Watch Video

Show Example:
jQuery

Configuration

An object defining configuration options for the dxRadioGroup widget.

Methods

This section describes methods that can be used to manipulate a widget.

Events

This section describes events fired by this component.