Radzen Textbox with multi string chips

Radzen.Blazor Components
1

Hi,

I have tried to create a radzen textbox with multi chips so that users can type string and when they press enter or tab it makes it chip and allow them to continue enter more strings. Can you please advise how can I modify below to make it work ?

<RadzenFormField 
    Text="ShortName"
    Style="flex-grow: 1!important;">
    <div style="display: block; display: flex; align-items: center;">
        <div style="display: flex; flex-wrap: nowrap;">
            @foreach (var chip in val)
            {
                <div class="chip" @key="chip" @onclick="() => VariationValueRemovedHandler(chip)"
                        style="
                        height: 25px; 
                        cursor: pointer; 
                        margin: 4px; padding: 
                        8px; background-color: 
                        #e0e0e0; border-radius: 4px;
                        display: flex;
                        align-items: center;">
                    @chip
                </div>
            }
        </div>
        <RadzenTextBox id="Variation_Value_Input" @bind-Value="@VariationValue" @onkeydown="(args) => VariationValuesChangeHandler(args)" />
    </div>
</RadzenFormField>

@code {
    private string? VariationValue;
    List<string> val = new List<string>();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }
    private async void VariationValuesChangeHandler(KeyboardEventArgs keypress)
    {
        if (keypress.Key != "Enter" && keypress.Key != "Tab") return;
        else
        {
            val.Add(VariationValue);
        }
        VariationValue = null;
        StateHasChanged();
    }
    private async void VariationValueRemovedHandler(string strChip)
    {
        val.Remove(strChip);
    }
}

Below is what I want to acheive

Mutlivalue Custom Field

2

Hi @Hunain_Nasir,

Your code doesn't work as the value of RadzenTextbox is updated when the user blurs it (it loses focus). As a result VariationValue is always null in VariationValuesChangeHandler

You can change your code like this so it uses JS interop to get the value and set it back:

    private async Task VariationValuesChangeHandler(KeyboardEventArgs keypress)
    {
        if (keypress.Key != "Enter" && keypress.Key != "Tab") return;
        else
        {
            // Get the value via JS interop
            var value = await JSRuntime.InvokeAsync<string>("eval", $"document.getElementById('Variation_Value_Input').value");
        
            val.Add(value);

            // Set the value 
            await JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('Variation_Value_Input').value = ''");
        }
    }

Make sure you inject the JSRuntime:

@inject IJSRuntime JSRuntime

chips

1 Like