Radio Group
Documentation
The RadioGroup is a widget that contains a set of radio buttons and allows an end user to make a single selection from the set. This demo illustrates how to change the widget layout, define a custom template and handle the value change event.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function(){
$("#radio-group-simple").dxRadioGroup({
items: priorities,
value: priorities[0]
});
$("#radio-group-disabled").dxRadioGroup({
items: priorities,
value: priorities[1],
disabled: true
});
$("#radio-group-change-layout").dxRadioGroup({
items: priorities,
value: priorities[0],
layout: "horizontal"
});
$("#radio-group-with-template").dxRadioGroup({
items: priorities,
value: priorities[2],
itemTemplate: function(itemData, _, itemElement){
itemElement
.parent().addClass(itemData.toLowerCase())
.text(itemData);
}
});
var radioGroup = $("#radio-group-with-selection").dxRadioGroup({
items: priorities,
onValueChanged: function(e){
$("#list").children().remove();
$.each(tasks, function(i, item){
if(item.priority == e.value) {
$("#list").append($("<li/>").text(tasks[i].subject));
}
});
}
}).dxRadioGroup("instance");
radioGroup.option("value", priorities[0]);
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.5/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="form">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Default mode</div>
<div class="dx-field-value">
<div id="radio-group-simple"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disabled</div>
<div class="dx-field-value">
<div id="radio-group-disabled"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Horizontal layout</div>
<div class="dx-field-value">
<div id="radio-group-change-layout"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Custom item template</div>
<div class="dx-field-value">
<div id="radio-group-with-template"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Event handling</div>
<div class="dx-field-value">
<div id="radio-group-with-selection"></div>
</div>
</div>
</div>
<div id="tasks-list">
Tasks by selected priority:
<ul id="list"></ul>
</div>
</div>
</div>
</body>
</html>
.low.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
background: gray;
}
.normal.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
background: green;
}
.urgent.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
background: orange;
}
.high.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
background: red;
}
#radio-group-with-selection {
margin-bottom: 10px;
}
#tasks-list {
margin: 0 0 10px 10px;
white-space: normal;
}
#list {
margin: 10px 0 0 20px;
padding-left: 0;
text-align: left;
}
var priorities = ["Low", "Normal", "Urgent", "High"],
tasks = [{
subject: "Choose between PPO and HMO Health Plan",
priority: "High"
}, {
subject: "Non-Compete Agreements",
priority: "Low"
}, {
subject: "Comment on Revenue Projections",
priority: "Normal"
}, {
subject: "Sign Updated NDA",
priority: "Urgent"
}, {
subject: "Submit Questions Regarding New NDA",
priority: "High"
}, {
subject: "Rollout of New Website and Marketing Brochures",
priority: "High"
}];