$(() => {
$('#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(itemData, _, itemElement) {
itemElement
.parent().addClass(itemData.toLowerCase())
.text(itemData);
},
});
const radioGroup = $('#radio-group-with-selection').dxRadioGroup({
items: priorityEntities,
valueExpr: 'id',
displayExpr: 'text',
onValueChanged(e) {
$('#list').children().remove();
$.each(tasks, (i, item) => {
if (item.priority === e.value) {
$('#list').append($('<li/>').text(tasks[i].subject));
}
});
},
}).dxRadioGroup('instance');
radioGroup.option('value', priorityEntities[0].id);
});
<!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/22.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.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;
}
const priorities = ['Low', 'Normal', 'Urgent', 'High'];
const priorityEntities = [
{ id: 0, text: 'Low' },
{ id: 1, text: 'Normal' },
{ id: 2, text: 'Urgent' },
{ id: 3, text: 'High' },
];
const tasks = [{
subject: 'Choose between PPO and HMO Health Plan',
priority: 3,
}, {
subject: 'Non-Compete Agreements',
priority: 0,
}, {
subject: 'Comment on Revenue Projections',
priority: 1,
}, {
subject: 'Sign Updated NDA',
priority: 2,
}, {
subject: 'Submit Questions Regarding New NDA',
priority: 3,
}, {
subject: 'Rollout of New Website and Marketing Brochures',
priority: 3,
}];
