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