JavaScript/jQuery RadioGroup - Customize Item Appearance

For a minor customization of RadioGroup items, you can define specific fields in item data objects. For example, the following code generates three radio buttons: the first is disabled, the second is not customized, the third is hidden.

JavaScript
  • $(function() {
  • $("#radioGroupContainer").dxRadioGroup({
  • dataSource: [
  • { text: "Low", disabled: true },
  • { text: "High" },
  • { text: "Urgent", visible: false }
  • ]
  • });
  • });

If you need a more flexible solution, define an itemTemplate.

JavaScript
  • $(function() {
  • $("#radioGroupContainer").dxRadioGroup({
  • dataSource: [
  • { text: "Low", color: "grey" },
  • { text: "Normal", color: "green" },
  • { text: "Urgent", color: "yellow" },
  • { text: "High", color: "red" }
  • ],
  • itemTemplate: function(itemData, itemIndex, itemElement){
  • itemElement.append(
  • $("<div />").attr("style", "color:" + itemData.color )
  • .text(itemData.text)
  • );
  • }
  • });
  • });

You can also customize an individual item. For this purpose, declare a template for it as a script and pass its id to the template.

HTML
JavaScript
  • <script id="individualTemplate" type="text/html">
  • <!-- ... -->
  • </script>
  • const radioGroupItems = [{
  • text: "Low",
  • template: $("#individualTemplate")
  • },
  • // ...
  • ];
See Also