Step-by-Step: DevExtreme How to Set Radio Group Selected Option

DevExtreme by DevExpress is a library full of ready-to-use UI components for web apps. It works with Angular, React, Vue, and even jQuery. One of its popular widgets is the RadioGroup, which lets users pick one option from a list.

In forms, settings pages, or dashboards, RadioGroup helps guide users to choose only one answer. For example, you might let them pick between “Monthly Plan” and “Yearly Plan.” To make the app feel smooth, developers often want to set a default choice or preselect a value. That’s where the value property in RadioGroup comes in.

What is a DevExtreme RadioGroup?

The RadioGroup widget is a simple but powerful input control. It takes a dataSource (like an array or JSON list) and shows radio buttons for each item. Users can then click to select one. Unlike a CheckBoxGroup, where multiple items can be picked, RadioGroup allows only a single choice at a time.

Developers usually care about two things: what the selected item is and how to set it correctly. The widget tracks the current choice through the value property. When you change this property, the selected item updates. This works across all frameworks — Angular, React, Vue, and jQuery — since the widget follows the same API.

Set a Default Selected Value in RadioGroup

Setting a default selected value is done through the value option when initializing the widget. You pass the value that matches one of the items in the dataSource, and that item shows up as preselected.

Here’s a simple example using plain JavaScript with a JSON dataSource:

$(“#radioGroupContainer”).dxRadioGroup({
items: [“Basic”, “Standard”, “Premium”],
value: “Standard” // Default selected
});

In this example, the “Standard” option will already be selected when the page loads. This is useful when you want to guide users to the most common or recommended choice.

You can also bind to objects instead of plain strings. For example:

Here, the valueExpr and displayExpr properties make sure the widget knows which field to use for the value and which field to show to the user.

Programmatically Change the Selected Item

Sometimes you don’t want the RadioGroup to just show a default value. You might need to change the selected option later, maybe after the user completes another step in your form or when data comes back from an API.

In DevExtreme, this is done by updating the value property of the RadioGroup. If you created the widget with jQuery, you can call option() to change it at runtime.

Example:

When the option(“value”, …) call runs, the RadioGroup instantly highlights “Premium.” This works in Angular, React, and Vue too — in those frameworks, you usually bind the value to state or a variable. When that state changes, the selected item updates automatically.

This approach is helpful for forms where the selection depends on other input. For example, if a user chooses “Business Account,” you might automatically set the RadioGroup to “Yearly Plan” instead of “Monthly Plan.”

Handling the onValueChanged Event

Setting a value is one side of the story. Capturing user interaction is the other. The onValueChanged event in DevExtreme lets you react whenever the user changes their selection.

Here’s a simple example:

Whenever the user picks a different plan, the console prints the new value. This event is key when you want to update other parts of the page or send the selection back to a database.

In frameworks, this works the same way but follows their event models. In React, for instance, you can use state and pass a handler function that fires when the RadioGroup changes. In Angular or Vue, you can bind directly with two-way data binding and use the event output to track changes.

Think of onValueChanged as your “listener.” It connects user action to your business logic — like showing a different price, enabling a button, or adjusting related fields. Without it, the RadioGroup would only display options without letting the rest of your app know what the user picked.

Framework-Specific Examples

DevExtreme works across many frameworks, and setting the selected RadioGroup value is almost the same everywhere, but the syntax changes a bit.

1. Angular Example:

In Angular, you usually bind the value to a component property.

<dx-radio-group
[items]=”[‘Basic’, ‘Standard’, ‘Premium’]”
[(value)]=”selectedPlan”>
</dx-radio-group>

Here, selectedPlan in your TypeScript file controls which item is selected. If you change selectedPlan, the RadioGroup updates right away.

2. React Example:

React uses controlled components, so you handle selection with state.

When the user picks a different plan, setPlan updates the state, and the RadioGroup shows the new selection.

3. Vue Example:

Vue makes it easy with v-model.

Changing selectedPlan in your Vue data updates the RadioGroup instantly.

4. jQuery Example:

jQuery is simple because you just create an instance and set the value.

Troubleshooting Common Issues

Even with simple widgets, things can go wrong. Here are the most common problems developers face:

• Value not updating: This usually happens when the value you set doesn’t match the valueExpr in your dataSource. For example, if your dataSource uses id, but you try to set the text instead, nothing changes.
• Multiple RadioGroups in one form: If you use the same data binding for two widgets, they can interfere with each other. Always use unique bindings or separate state for each group.
• Styling or layout problems: Sometimes the RadioGroup doesn’t look right inside forms or grids. Make sure the container has enough space and the CSS isn’t overriding DevExtreme’s styles.

Most of these issues come down to mismatched values or missing bindings. Checking your value, valueExpr, and dataSource usually solves them.

Conclusion

The RadioGroup widget in DevExtreme is a simple but important tool. You use the value property to set a default, option(“value”) to change it later, and onValueChanged to capture user actions. In Angular, React, Vue, or jQuery, the method is the same — bind the value correctly, and it works.

If something isn’t updating, check your data binding and make sure the value matches your dataSource. Once you set it up right, RadioGroup becomes a smooth way to guide users into making the choice you want.