Unplanned
Last Updated: 16 Dec 2021 16:02 by ADMIN
Eli
Created on: 10 Dec 2021 16:20
Category: RadioGroup
Type: Feature Request
1
Add Columns Parameter to RadioGroup

I would like to have the option (similar to AJAX controls radiobuttonlist) to specify the number of columns a RadioGroup has.  This would allow it to be evenly formatted no matter the text width and the ordering to go top to bottom and then left to right like below.

Since your control does not allow you to manually define child items, it becomes less useful than the built in InputRadioGroup control provided by Microsoft which allows me to set up the items and styling myself, which is what I use instead. 

 

1 comment
ADMIN
Hristian Stefanov
Posted on: 16 Dec 2021 16:02

Hi Eli,

Thank you for creating a public item for the described feature. We see this as a valid feature request. I'm changing the status of the item to "Unplanned". You are automatically subscribed to receive email notifications for status updates.

As a workaround, you can achieve the desired display of the radio group by using custom CSS styles. I have prepared for you the following example with the responsible CSS highlighted. I also added Class to specify the radio group instance. 

<style>
    .my-radiogroup {
        height: 160px;
        width: 280px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
</style>

Chosen number: @( ChosenNumber == 0 ? "no selection yet (0)" : ChosenNumber.ToString() )
<br />

<TelerikRadioGroup Data="@NumberOptions"
                   @bind-Value="@ChosenNumber"
                   Class="my-radiogroup"
                   ValueField="@nameof(NumberModel.NumberId)"
                   TextField="@nameof(NumberModel.NumberText)">
</TelerikRadioGroup>

@code{
    int ChosenNumber { get; set; }

    public IEnumerable<NumberModel> NumberOptions = Enumerable.Range(0, 10).Select(x => new NumberModel
    {
        NumberId = x,
        NumberText = "Number " + x
    });

    public class NumberModel
    {
        public int NumberId { get; set; }
        public string NumberText { get; set; }
    }
}

Please let me know if you need any additional information. Thank you.

Regards,
Hristian Stefanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!