Angular 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.

jQuery
JavaScript
$(function() {
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: [
            { text: "Low", disabled: true },
            { text: "High" },
            { text: "Urgent", visible: false }
        ]
    });
});
Angular
HTML
TypeScript
<dx-radio-group
    [dataSource]="dataSource">
</dx-radio-group>
import { DxRadioGroupModule } from "devextreme-angular";
// ...
export class AppComponent {
    dataSource = [
        { text: "Low", disabled: true },
        { text: "High" },
        { text: "Urgent", visible: false }
    ]
}
@NgModule({
    imports: [
        // ...
        DxRadioGroupModule
    ],
    // ...
})
Vue
<template>
    <DxRadioGroup :data-source="dataSource"/>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxRadioGroup } from 'devextreme-vue/radio-group';

export default {
    components: {
        DxRadioGroup
    },
    data() {
        return {
            dataSource: [
                { text: 'Low', disabled: true },
                { text: 'High' },
                { text: 'Urgent', visible: false }
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { RadioGroup } from 'devextreme-react/radio-group';

const dataSource = [
    { text: 'Low', disabled: true },
    { text: 'High' },
    { text: 'Urgent', visible: false }
];

class App extends React.Component {
    render() {
        return (
            <RadioGroup dataSource={dataSource}/>
        );
    }
}

export default App;

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

jQuery
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)
            );
        }
    });
});
Angular
HTML
TypeScript
<dx-radio-group 
    [dataSource]="dataSource"
    itemTemplate="radio">
    <div class="radio" *dxTemplate="let data of 'radio'">
        <p style="font-size:larger"><b>{{data}}</b></p>
    </div>
</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"
        item-template="radio">
        <template #radio="{ data }">
            <div>
                <p style="font-size:larger"><b>{{data}}</b></p>
            </div>
        </template>
    </DxRadioGroup>
</template>

<script>
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.light.css';

import { RadioGroup } from 'devextreme-react/radio-group';

const dataSource = ['Low', 'Normal', 'Urgent', 'High'];

const renderRadioGroupItem = (itemData) => {
    return (
        <div>
            <p style={{fontSize: "larger"}}><b>{itemData}</b></p>
        </div>
    );
}

class App extends React.Component {
    render() {
        return (
            <RadioGroup
                dataSource={dataSource}
                itemRender={renderRadioGroupItem}
            />
        );
    }
}

export default App;
jQuery

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