RadzenRadioButtonList layout in rows and columns

Radzen.Blazor Components
1

Is there a way to use the RadzenRadioButtonList in columns and rows as shown in this picture?

I need 4 columns. 1. for the option, 2. Image 3. text. 4. dollars

2023-10-24_11-30-23
2023-10-24_11-30-23500×755 234 KB

2

Hi @kkluth,

You can add a template inside the RadzenRadioButtonListItem to achieve this:

image
image926×574 19.7 KB

<RadzenRadioButtonList TValue="int" Orientation="Radzen.Orientation.Vertical" Style="width: 100%">
    <Items>
        <RadzenRadioButtonListItem Value="1">
            <Template>
                <RadzenRow Style="width: 400px">
                    <RadzenColumn Size="2" Style="vertical-align: middle">
                        <RadzenIcon Icon="image" Style="width: 48px; height: 48px"></RadzenIcon>
                    </RadzenColumn>
                    <RadzenColumn Size="8" class="rz-display-flex rz-align-items-center">
                        <div>
                            <RadzenText Text="Title" Style="margin: 0px" TagName="Radzen.Blazor.TagName.H6" TextStyle="Radzen.Blazor.TextStyle.H6" />
                            <RadzenText Text="Item 1 Text" Style="margin: 0px" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.Body2" />
                        </div>
                    </RadzenColumn>
                    <RadzenColumn Size="2" class="rz-display-flex rz-align-items-center">
                        <RadzenText Text="$125" Style="vertical-align: middle; margin: 0px" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.Subtitle2">
                        </RadzenText>
                    </RadzenColumn>
                </RadzenRow>
            </Template>
        </RadzenRadioButtonListItem>
        <RadzenRadioButtonListItem Value="2">
            <Template>
                <RadzenRow Style="width: 400px">
                    <RadzenColumn Size="2" Style="vertical-align: middle">
                        <RadzenIcon Icon="image" Style="width: 48px; height: 48px"></RadzenIcon>
                    </RadzenColumn>
                    <RadzenColumn Size="8" class="rz-display-flex rz-align-items-center">
                        <div>
                            <RadzenText Text="Title" Style="margin: 0px" TagName="Radzen.Blazor.TagName.H6" TextStyle="Radzen.Blazor.TextStyle.H6" />
                            <RadzenText Text="Item 2 Text" Style="margin: 0px" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.Body2" />
                        </div>
                    </RadzenColumn>
                    <RadzenColumn Size="2" class="rz-display-flex rz-align-items-center">
                        <RadzenText Text="$125" Style="vertical-align: middle; margin: 0px" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.Subtitle2">
                        </RadzenText>
                    </RadzenColumn>
                </RadzenRow>
            </Template>
        </RadzenRadioButtonListItem>
        <RadzenRadioButtonListItem Value="3">
            <Template>
                <RadzenRow Style="width: 400px">
                    <RadzenColumn Size="2" Style="vertical-align: middle">
                        <RadzenIcon Icon="image" Style="width: 48px; height: 48px"></RadzenIcon>
                    </RadzenColumn>
                    <RadzenColumn Size="8" class="rz-display-flex rz-align-items-center">
                        <div>
                            <RadzenText Text="Title" Style="margin: 0px" TagName="Radzen.Blazor.TagName.H6" TextStyle="Radzen.Blazor.TextStyle.H6" />
                            <RadzenText Text="Item 3 Text" Style="margin: 0px" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.Body2" />
                        </div>
                    </RadzenColumn>
                    <RadzenColumn Size="2" class="rz-display-flex rz-align-items-center">
                        <RadzenText Text="$125" Style="vertical-align: middle; margin: 0px" TagName="Radzen.Blazor.TagName.P" TextStyle="Radzen.Blazor.TextStyle.Subtitle2">
                        </RadzenText>
                    </RadzenColumn>
                </RadzenRow>
            </Template>
        </RadzenRadioButtonListItem>
    </Items>
</RadzenRadioButtonList>
1 Like
3

Thank you so much for that solution. Very much appreciated.