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
$(function() { $("#radioGroupContainer").dxRadioGroup({ dataSource: [ { text: "Low", disabled: true }, { text: "High" }, { text: "Urgent", visible: false } ] }); });
Angular
<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.common.css'; 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.common.css'; 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. In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
Angular
<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.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']; 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;
If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the itemTemplate callback function as shown in the following code.
$(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.
<script id="individualTemplate" type="text/html"> <!-- ... --> </script>
const radioGroupItems = [{ text: "Low", template: $("#individualTemplate") }, // ... ];
In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the 3rd-Party Template Engines article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.