kb(radiobuttongroup): Update KB example and styles (#2283)

* kb(radiobuttongroup): Update KB

* kb(radiogroup): Provide example for older versions too

* rename CSS class

Author: dimodi

knowledge-base/radiogroup-like-buttongroup.md

@@ -5,7 +5,7 @@ type: how-to
 page_title: How to Style the RadioGroup to Look Like a ButtonGroup
 slug: radiogroup-kb-like-buttongroup
 position:
-tags: radiogroup, button, buttongroup
+tags: radiogroup, button, buttongroup, styles
 ticketid: 1547117
 res_type: kb
 ---
@@ -29,15 +29,20 @@ How to implement RadioGroup behavior, but style the label and radio input pairs
 
 Use custom CSS to make the radio inputs invisible and style their labels to look like buttons.
 
-The RadioGroup will look the same as a [ButtonGroup with single selection]({%slug buttongroup-selection%}#single-selection). The major difference is that the RadioGroup has a single value of `<T>`, while each button in the ButtonGroup is bound to a separate `boolean` value for its selected state.
+The RadioGroup will look similar to a [ButtonGroup with single selection]({%slug buttongroup-selection%}#single-selection). The major difference is that the RadioGroup has a single value of type `<T>`, while each button in the ButtonGroup is bound to a separate `boolean` value for its selected state.
 
->caption Style the RadioGroup Like a ButtonGroup
+>tip The following example is for versions 6.0 and above, which feature an [updated HTML rendering for the RadioGroup]({%slug changes-in-6-0-0%}#radiogroup). If you are using an older version, use the [alternative CSS code from the section below](#solution-up-to-version-511).
+
+>caption Style the RadioGroup like a ButtonGroup
 
 ````CSHTML
-<h1>RadioGroup like a ButtonGroup</h1>
+<h1 style="font-size:1.5rem;">RadioGroup like a ButtonGroup</h1>
 
-<br />
-<TelerikRadioGroup Class="labels-only"
+<p>Selected Value: <strong><code>@CurrentStatus</code></strong></p>
+
+<h2 style="font-size: 1.2rem; margin: .6em 0">Workaround with RadioGroup and CSS</h2>
+
+<TelerikRadioGroup Class="radio-buttons"
                    Data="@Statuses"
                    @bind-Value="@CurrentStatus"
                    ValueField="@nameof(Status.Id)"
@@ -55,61 +60,82 @@ The RadioGroup will look the same as a [ButtonGroup with single selection]({%slu
                    LabelPosition="RadioGroupLabelPosition.After">
 </TelerikRadioGroup>
 
-<br />
-<p>Selected Value: <strong>@CurrentStatus.ToString()</strong></p>
+<h2 style="font-size: 1.2rem; margin: .6em 0">Built-in Approach with ButtonGroup</h2>
+
+<TelerikButtonGroup>
+    @foreach (var item in Statuses)
+    {
+        <ButtonGroupToggleButton Selected="@( item.Id == CurrentStatus )"
+                                 SelectedChanged="@( (bool newSelected) => ToggleButtonSelectedChanged(newSelected, item.Id) )">
+            @item.Text
+        </ButtonGroupToggleButton>
+    }
+</TelerikButtonGroup>
 
 <style>
     /* remove the horizontal space between the RadioGroup items */
-    .labels-only {
-        display: flex;
+    .k-radio-list.radio-buttons {
+        gap: 0;
     }
 
     /* reset styles and support absolute radio inputs */
-    .labels-only .k-radio-item {
+    .radio-buttons .k-radio-list-item {
         margin: 0;
         padding: 0;
         position: relative;
     }
 
     /* hide the radio buttons */
-    .labels-only .k-radio {
+    .radio-buttons .k-radio-wrap {
         opacity: 0;
         position: absolute;
     }
-    .labels-only .k-radio:checked::before {
+
+    .radio-buttons .k-radio-wrap::before {
         display: none;
     }
 
     /* make the radio labels look like buttons */
-    .labels-only .k-radio-label {
+    .radio-buttons .k-radio-label {
         display: inline-block;
         margin: 0;
-        padding: .4em .6em .3em;
+        padding: .2em .6em;
         border: 1px solid #ff6358;
         border-left-width: 0;
         position: relative;
+        font-size: var(--kendo-font-size, inherit);
         color: #ff6358;
     }
 
     /* first and last button borders */
-    .labels-only .k-radio-item:first-child .k-radio-label {
+    .radio-buttons .k-radio-list-item:first-child .k-radio-label {
         border-left-width: 1px;
         border-radius: .2em 0 0 .2em;
     }
-    .labels-only .k-radio-item:last-child .k-radio-label {
+
+    .radio-buttons .k-radio-list-item:last-child .k-radio-label {
         border-radius: 0 .2em .2em 0;
     }
 
     /* button selected state */
-    .labels-only .k-radio:checked + .k-radio-label {
+    .radio-buttons .k-radio-wrap:has(.k-radio:checked) + .k-radio-label {
         background-color: #ff6358;
         color: #fff;
     }
 </style>
 
 @code{
-    List<Status> Statuses { get; set; } = new();
-    int CurrentStatus { get; set; } = 3;
+    private List<Status> Statuses { get; set; } = new();
+
+    private int CurrentStatus { get; set; } = 3;
+
+    private void ToggleButtonSelectedChanged(bool newSelected, int id)
+    {
+        if (newSelected)
+        {
+            CurrentStatus = id;
+        }
+    }
 
     protected override Task OnInitializedAsync()
     {
@@ -128,7 +154,71 @@ The RadioGroup will look the same as a [ButtonGroup with single selection]({%slu
     public class Status
     {
         public int Id { get; set; }
-        public string Text { get; set; }
+        public string Text { get; set; } = string.Empty;
     }
 }
 ````
+
+### Solution up to version 5.1.1
+
+The following CSS code targets different RadioGroup HTML markup up to version 5.1.1.
+
+>caption CSS code to style the RadioGroup like a ButtonGroup up to version 5.1.1
+
+<div class="skip-repl"></div>
+
+````CSS
+/* remove the horizontal space between the RadioGroup items */
+.k-radio-list.radio-buttons {
+    gap: 0;
+}
+
+/* reset styles and support absolute radio inputs */
+.radio-buttons .k-radio-item {
+    margin: 0;
+    padding: 0;
+    position: relative;
+}
+
+/* hide the radio buttons */
+.radio-buttons .k-radio {
+    opacity: 0;
+    position: absolute;
+}
+
+.radio-buttons .k-radio::before {
+    display: none;
+}
+
+/* make the radio labels look like buttons */
+.radio-buttons .k-radio-label {
+    display: inline-block;
+    margin: 0;
+    padding: .2em .6em;
+    border: 1px solid #ff6358;
+    border-left-width: 0;
+    position: relative;
+    font-size: var(--kendo-font-size, inherit);
+    color: #ff6358;
+}
+
+/* first and last button borders */
+.radio-buttons .k-radio-item:first-child .k-radio-label {
+    border-left-width: 1px;
+    border-radius: .2em 0 0 .2em;
+}
+
+.radio-buttons .k-radio-item:last-child .k-radio-label {
+    border-radius: 0 .2em .2em 0;
+}
+
+/* button selected state */
+.radio-buttons .k-radio:checked + .k-radio-label {
+    background-color: #ff6358;
+    color: #fff;
+}
+````
+
+## See Also
+
+* [How to override CSS theme styles]({%slug themes-override%})