Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Radio Group
Documentation
The RadioGroup is a UI component 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 UI component 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.
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.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.list = [tasks[1]];
$scope.radioGroup = {
simple: {
items: priorities,
value: priorities[0]
},
disabled: {
items: priorities,
value: priorities[1],
disabled: true
},
changeLayout: {
items: priorities,
value: priorities[0],
layout: "horizontal"
},
customItemTemplate: {
items: priorities,
value: priorities[2],
itemTemplate: function(itemData, _, itemElement){
itemElement
.parent().addClass(itemData.toLowerCase())
.text(itemData);
}
},
eventRadioGroupOptions: {
items: priorities,
value: priorities[0],
onValueChanged: function(e) {
$scope.list = tasks.filter(function(item) {
return item.priority == e.value;
});
}
}
};
});
<!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.5.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/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.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" ng-app="DemoApp" ng-controller="DemoController">
<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 dx-radio-group="radioGroup.simple"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disabled</div>
<div class="dx-field-value">
<div dx-radio-group="radioGroup.disabled"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Horizontal layout</div>
<div class="dx-field-value">
<div dx-radio-group="radioGroup.changeLayout"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Custom item template</div>
<div class="dx-field-value">
<div dx-radio-group="radioGroup.customItemTemplate"></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"
dx-radio-group="radioGroup.eventRadioGroupOptions"></div>
</div>
</div>
</div>
<div id="tasks-list">
Tasks by selected priority:
<ul id="list">
<li ng-repeat="task in list">{{task.subject}}</li>
</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"
}];