Binding existing value to radzen DropDown

Radzen.Blazor Components
1

Hi Great team :slight_smile:

I'm using the community Licence, not yet a paying customer.

If someone could help me with the following issue, I'm not sure if I'm experiencing a bug, or if I'm using the component wrongly.

The issue is with the RadzenDropDown component.

I wrapped that component in my component, and when I pass the existing value, it acts like its value is set to null, and I need to perform an initial search.

Placeholder text is displayed.

However, when I clicked on it and tried searching, I could see that the value was already bound.

Any help would be great!

My code wrapping the RadzenDropDown component looks like this:

@inject IHttpClientFactory _clientFactory

<RadzenDropDown AllowClear="true" Value="@Value" ValueChanged="@( (Customer c) => select(c) )" Placeholder="Pretraga firmi:"
                LoadData=@LoadData AllowFiltering="true"
                Data=@customers TextProperty="Name" Style="width: 100%; max-width: 400px;"
                FilterDelay="200" >
    <Template>
        @((context as Customer).Pib)--@((context as Customer).Name)--@((context as Customer).City)
    </Template>
    <ValueTemplate>
       @((context as Customer).Name)
    </ValueTemplate>
</RadzenDropDown>



@code {
    IEnumerable<Customer> customers;

    [Parameter] public Customer Value { get; set; } 

    [Parameter] public EventCallback<Customer> ValueChanged { get; set; } 


    async Task LoadData(LoadDataArgs args)
    {
        if (!string.IsNullOrEmpty(args.Filter))
        {
            //query = query.Where(c => c.CustomerID.ToLower().Contains(args.Filter.ToLower()) || c.ContactName.ToLower().Contains(args.Filter.ToLower()));
            HttpClient httpClient = _clientFactory.CreateClient("hrm");
            var response = await httpClient.GetFromJsonAsync<IEnumerable<Customer>>($"/api/Customers/?partOfName={Uri.EscapeDataString(args.Filter)}");
            customers = response;
        }
        await InvokeAsync(StateHasChanged);
    }


 


    async Task select(Customer customer)
    {
        Value = customer;
        await ValueChanged.InvokeAsync(Value);
    }


}
2

This event usually should not be used since it's used internally by the Blazor framework for @bind-Value expression. You can use Change event instead.

3

Hello @enchev ,
Thank you for resposne!
I've tried changing the code like this:

<RadzenDropDown AllowClear="true" @bind-value="@Value" Change="@(args => select((Customer)args))" TValue="Customer" Placeholder="Pretraga firmi:"
    LoadData=@LoadData AllowFiltering="true"
    Data=@customers TextProperty="Name" Style="width: 100%; max-width: 400px;"
    FilterDelay="200" >

But I'm still getting the same result.

To double-check, i've put this method in the component:

protected override async Task OnInitializedAsync()
{


    await select(Value);
    Console.WriteLine(Value?.Name);

}

And sure enough, the Name is written to Console, but RadzenDropDown is still displaying a placeholder instead of Value.Name

4

I found the problem. The Data= property must contain selected value.
Since this property is null in example, and is populated only upon filtering it seems like its not holding value.

Probably a bug, will try to work around this.

Thank you for your support!