DevExtreme jQuery - Overview
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.
The following code adds a simple RadioGroup to your page. Here, the value option specifies the initially selected radio button.
jQuery
HTML
JavaScript
<div id="radioGroupContainer"></div>
$(function() {
$("#radioGroupContainer").dxRadioGroup({
dataSource: ["Low", "Normal", "Urgent", "High"],
value: "Low"
});
});Angular
HTML
TypeScript
<dx-radio-group
[dataSource]="dataSource"
value="Low">
</dx-radio-group>
import { DxRadioGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
dataSource = ["Low", "Normal", "Urgent", "High"]
}
@NgModule({
imports: [
// ...
DxRadioGroupModule
],
// ...
})Vue
<template>
<DxRadioGroup
:data-source="dataSource"
value="Low"
/>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { DxRadioGroup } from 'devextreme-vue/radio-group';
export default {
components: {
DxRadioGroup
},
data() {
return {
dataSource: ['Low', 'Normal', 'Urgent', 'High']
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { RadioGroup } from 'devextreme-react/radio-group';
const dataSource = ['Low', 'Normal', 'Urgent', 'High'];
class App extends React.Component {
render() {
return (
<RadioGroup
dataSource={dataSource}
value="Low"
/>
);
}
}
export default App;If your data is an array of objects, bind it to the RadioGroup using the displayExpr and valueExpr options. displayExpr specifies which data source field provides texts for buttons; valueExpr specifies which data source field provides values to be written to the value option when a button is selected. Leave valueExpr unspecified if you need the entire data object to be written to the value option.
jQuery
JavaScript
const dataItems = [
{ text: "Low", color: "grey" },
{ text: "Normal", color: "green" },
{ text: "Urgent", color: "yellow" },
{ text: "High", color: "red" }
];
$(function() {
$("#radioGroupContainer").dxRadioGroup({
dataSource: dataItems,
displayExpr: "text",
// valueExpr: "color",
value: dataItems[1]
});
});Angular
HTML
TypeScript
<dx-radio-group
[dataSource]="dataItems"
[value]="radioGroupValue"
displayExpr="text">
</dx-radio-group>
import { DxRadioGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
dataItems = [
{ text: "Low", color: "grey" },
{ text: "Normal", color: "green" },
{ text: "Urgent", color: "yellow" },
{ text: "High", color: "red" }
];
radioGroupValue = dataItems[1];
}
@NgModule({
imports: [
// ...
DxRadioGroupModule
],
// ...
})Vue
<template>
<DxRadioGroup
:data-source="dataItems"
:value="radioGroupValue"
display-expr="text"
/>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { DxRadioGroup } from 'devextreme-vue/radio-group';
const items = [
{ text: 'Low', color: 'grey' },
{ text: 'Normal', color: 'green' },
{ text: 'Urgent', color: 'yellow' },
{ text: 'High', color: 'red' }
];
export default {
components: {
DxRadioGroup
},
data() {
return {
dataItems: items,
radioGroupValue: items[1]
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { RadioGroup } from 'devextreme-react/radio-group';
const dataItems = [
{ text: 'Low', color: 'grey' },
{ text: 'Normal', color: 'green' },
{ text: 'Urgent', color: 'yellow' },
{ text: 'High', color: 'red' }
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: dataItems[1]
};
}
render() {
return (
<RadioGroup
dataSource={dataItems}
value={this.state.value}
displayExpr="text"
/>
);
}
}
export default App;The RadioGroup widget supports horizontal (default for tablets) and vertical (default for other devices) layouts. To change the layout for all types of devices, specify the layout option.
jQuery
JavaScript
$(function() {
$("#radioGroupContainer").dxRadioGroup({
dataSource: ["Low", "Normal", "Urgent", "High"],
layout: "horizontal" // or "vertical"
});
});Angular
HTML
TypeScript
<dx-radio-group
[dataSource]="dataSource"
layout="horizontal">
</dx-radio-group>
import { DxRadioGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
dataSource = ["Low", "Normal", "Urgent", "High"]
}
@NgModule({
imports: [
// ...
DxRadioGroupModule
],
// ...
})Vue
<template>
<DxRadioGroup
:data-source="dataSource"
layout="horizontal"
/>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { DxRadioGroup } from 'devextreme-vue/radio-group';
export default {
components: {
DxRadioGroup
},
data() {
return {
dataSource: ['Low', 'Normal', 'Urgent', 'High']
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { RadioGroup } from 'devextreme-react/radio-group';
const dataSource = ['Low', 'Normal', 'Urgent', 'High'];
class App extends React.Component {
render() {
return (
<RadioGroup
dataSource={dataSource}
layout="horizontal"
/>
);
}
}
export default App;See Also
Feedback