Flex or grid does not work in template of listbox

Radzen.Blazor Components
1

hi,
i'm trying to make a template for a listbox with elements next to eachother. in this case a radzentext and a radzenprogressbar. however this does not want to work. i'm trying to get this to work with a grid. but it does not seem to like it.
this is my code.

                    <RadzenListBox @bind-Value=@(selectedPeriod) Data=@(periods) TValue="ExpositionPeriod"
                                Style="height:300px; margin: 10px; width: 500px;">
                    <Template>
                        <div class="grid-container">
                            <div style="grid-row: 1; grid-column: 1;">
                                <RadzenText Text="@($"{(context as ExpositionPeriod).From.ToShortTimeString()} - {(context as ExpositionPeriod).Until.ToShortTimeString()}")" TextStyle="TextStyle.Subtitle2" />
                            </div>
                            <div style="grid-row: 2; grid-column: 2;">
                                <RadzenProgressBar Value="@(((ExpositionPeriod)context).Occupancy.Remaining)" Max="@(((ExpositionPeriod)context).Occupancy.Maximum)" Style="max-width: 40px;" />
                            </div>
                        </div>
                    </Template>
                    </RadzenListBox>
2

Hi @bjorn130,

RadzenListBox does not support this type of customization. I am not quite sure why you are adding a textbox and a progressbar in it. Its purpose is to present selection interface to the user. Adding textboxes and progressbars there seems odd. You should probably try a different component.

3

Hi,

I actualy got it to work and i think it looks pretty nice. still needs some tweaking. but i'm happy for now.
image