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.
- $(function() {
- $("#radioGroupContainer").dxRadioGroup({
- dataSource: [
- { text: "Low", disabled: true },
- { text: "High" },
- { text: "Urgent", visible: false }
- ]
- });
- });
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:
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.