Dropdown filtering korean characters issue

Radzen.Blazor Components
1

Hi. I use the filtering function on the drop-down data grid input control, and when I type 3 Korean characters, It was 3 characters in the web assembly (Correct), but 5 characters in the server (Wrong). Is there any solution?

[Webassembly]
wasm

[Server]
server

2

Hi @Doyun_Kim,

Blazor server probably has higher latency hence the delay during filtering. You can try setting the FilterDelay attribute (which is measured in milliseconds and the default is 500).

<RadzenDropDownDataGrid FilterDelay="500" ... />
3

Thanks but it is still not working.

4

Then it is probably the latency introduced by Blazor server. I am afraid we can't do much about that.

5

Ok. thanks for it. :grin:

6

I also encountered the same issue and found that it can be fixed in .NET 7.0 by using " Use @bind:get/@bind:set modifiers and avoid event handlers for two-way data binding". I reported this on GitHub as an issue.

7

Hey @rlqja3514,

Can you point us to some of our examples where we can reproduce this? You can edit any example to try to replicate it.

8

Hi @enchev

To align with the provided link, change the <input> tag's value and @oninput to:

@bind:event="oninput" @bind:get="inputValue" @bind:set="OnInput"

Below is an example for testing this. "Search Filtering Error" is the code that causes an error, and "Search Filtering Success" is the working example. You can test by entering "ν•˜λ‚˜λ‘˜μ…‹" (Korean characters).

@page "/"
<div style="display:flex;flex-direction:column; width:300px;">
    <h3>Search Filtering Error</h3>
    <RadzenDropDown @bind-SearchText=SearchText
                    FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith" AllowFiltering="true"
                    Data=@SearchItems
                    @bind-Value=value Style="width: 100%; max-width: 400px;"
                    Name="DropDownFiltering" />
    <input value="@inputValue" @oninput="OnInput" />
</div>

<h3>Search Filtering Success</h3>
<div style="display:flex;flex-direction:column; width:300px;">
    <input @bind:event="oninput" @bind:get="inputValue" @bind:set="OnInput" />
    <input @bind:event="oninput" @bind:get="inputValue" @bind:set="OnInput" @onchange="HandleChange" @onkeydown="OnFilterKeyPress" />
</div>


@code {
    string SearchText;
    string value;

    private List<string> SearchItems = new List<string>
    {
        "ν•˜λ‚˜",
        "ν•˜λ‚˜λ‘˜",
        "ν•˜λ‚˜λ‘˜μ…‹"
    };

    private string? inputValue;
    private void OnInput(ChangeEventArgs args)
    {
        var newValue = args.Value?.ToString() ?? string.Empty;

        inputValue = newValue;
    }
    private void OnInput(string value)
    {
        var newValue = value ?? string.Empty;

        inputValue = newValue;
    }

    private void HandleChange(ChangeEventArgs e)
    {
        Console.WriteLine($"Input value changed on blur: {inputValue}");
    }
    private void OnFilterKeyPress(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
            Console.WriteLine($"Enter pressed with value: {inputValue}");
            // Perform any additional logic for Enter key press
        }
    }
}
9

Based on .NET 7.0, we changed the RazorLangVersion to 7.0 and modified the input tag as follows:

<input aria-label="@SearchAriaLabel" id="@SearchID" @ref="@search" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" placeholder="@FilterPlaceholder" class="rz-dropdown-filter rz-inputtext" autocomplete="off" aria-autocomplete="none" type="text"
       @onchange="@((ChangeEventArgs args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))"
           @bind:event="oninput" @bind:get="@searchText"
           @bind:set=@(args => { searchText = $"{args}"; SearchTextChanged.InvokeAsync(searchText);}) />
<span class="rz-dropdown-filter-icon rzi rzi-search"></span>

We have confirmed that it works correctly with these changes.
DropDownFilterChanged

10

Simply changing RazorLangVersion to 7.0 and updating this code will not work since Radzen.Blazor supports older .NET versions as well. We will check how to handle this.

1 Like
11
2 Likes