Border around selected SelectBar item

Radzen.Blazor Components
1

Hi,

I've been playing around in the RadzenSelectBar demo code trying to figure out how to get this to work.

With the code below I get a border but not immediately when I click a number. It happens when I either click it again or if I click a different number.

<div class="rz-p-12 rz-text-align-center">
    <RadzenSelectBar @bind-Value=@_enteredNumber TValue="int?">
        <Items>
            @{
                foreach (var value in values)
                {
                    var borderStyle = value == _enteredNumber ? "border: 3px solid black;" : "border: 1px solid transparent;";

                    <RadzenSelectBarItem Text="@value.ToString()" Value="@value" Style="@borderStyle" />
                }
            }
        </Items>
    </RadzenSelectBar>
</div>

@code {
    int? _enteredNumber;
    IEnumerable<int> values = new int[]{0, 1, 2, 3, 4, 5, 6};
}

Anyone see what I am missing?

Kind regards,
Tino

2

Hi @TinoS,

Most probably you found a solution already, but I guess the "second click" problem happens because you’re rebuilding the item list each render with inline styles, which resets Radzen’s selection tracking. Let Radzen manage selection and use the already available rz-state-active and rz-state-focused CSS classes to change styles.