Last Updated: 05 Dec 2021 09:46 by ADMIN
Created on: 03 Dec 2021 07:00
Category: UI for Blazor
Type: Bug Report
TelerikDropDownList Binding does not work correctly when using components and async methods

I am experiencing this problem with version 2.29 when the dropdown list is in a "component"

It seems to be intermittent but dependent on how long the async method takes to complete.

 Edit page

@page "/"
@using System.Diagnostics
@using System.Threading
@using BlazorApp1.Components

<h1>Hello, world!</h1>

<EditForm class="form-inline" Model="@Model">
    <MyComponent />

Welcome to your new app.

@code {
    object Model = new();
    private Guid InstanceId;

    public Index()
        InstanceId = Guid.NewGuid();
        Debug.WriteLine($"Index - {InstanceId}");

    protected override Task OnInitializedAsync()
        Debug.WriteLine("Index - OnInitializedAsync");
        return base.OnInitializedAsync();

    protected override Task OnParametersSetAsync()
        Debug.WriteLine("Index - OnParametersSetAsync");
        return base.OnParametersSetAsync();



@using System.Diagnostics <h3>My Component</h3>

<br />

<TelerikDropDownList @bind-Value=_selectedValue Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" TValue="int" TItem="MyDdlModel"></TelerikDropDownList>

<br />

<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton><br />

@helloString <br /> @code { private Guid InstanceId; MarkupString helloString; int _selectedValue { get; set; } = 2; // Preselected value IEnumerable<MyDdlModel> myComboData { get; set; } = Enumerable.Empty<MyDdlModel>(); void SayHelloHandler() { string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now); helloString = new MarkupString(msg); } public MyComponent() { InstanceId = Guid.NewGuid(); Debug.WriteLine($"MyComponent - {InstanceId}"); } protected override async Task OnInitializedAsync() { Debug.WriteLine("MyComponent - OnInitializedAsync"); myComboData = await LoadData(); await base.OnInitializedAsync(); } protected override Task OnParametersSetAsync() { Debug.WriteLine("MyComponent - OnParametersSetAsync"); return base.OnParametersSetAsync(); } private async Task<IEnumerable<MyDdlModel>> LoadData() { await Task.Delay(100); return Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }); } public class MyDdlModel { public int MyValueField { get; set; } public string MyTextField { get; set; } } }


This item is a duplicate of an already existing item. You can find the original item here:
1 comment
Marin Bratanov
Posted on: 05 Dec 2021 09:46

Hello Robert,

I just noticed this thread, and the other private ticket you had opened.

I am going to paste the response from my colleague Nadezhda here as it offers more detail than my cursory glance at the forum thread I stumbled upon first.



Thank you for the provided details and snippets! As far as I can understand the issue you are referring to is that the selected item is not populated in the DropDownList if the data is received after the component is initialized. This behavior can be reproduced regardless of whether the DropDownList is used in a separate component or directly on the page. In addition, as you correctly stated, the issue does not occur when using the ComboBox component.

We currently have an opened bug report for not updating the selected text when changing the data collection. It essentially covers the currently discussed scenario as well since the predefined selected item is actually a part of a collection that is provided to the DropDownList after it is initialized.

That said, I added a note in the linked item to cover this scenario as well. I also voted for it on your behalf to increase its popularity as we are prioritizing the bug fixes based on the community interest and demand. You can follow it to receive email notifications when its status changes as this is the best way to keep in track of its progress. I will now convert this thread to "Bug report" as well.

By the time the fix is live, you can try the following workaround - set the preselected item value in the OnInitialized after loading the data:

    protected override async Task OnInitializedAsync()
        Debug.WriteLine("MyComponent - OnInitializedAsync");
        myComboData = await LoadData();
_selectedValue = 2;
        await base.OnInitializedAsync();
Apart from that, considering that the ComboBox component behaves as expected in terms of populating the selected item when the data is received after the component initialization, you may use it until the DropDownList issue is fixed (if you consider it suitable for your scenario, of course).

I hope you will find the above information useful to move forward with your application. Please let us know if any further questions appear.





So, I will mark this one as a duplicate.

Marin Bratanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!