Telerik ComboBox bind-Value not selected after async data load

1 Answer 69 Views
ComboBox
Andrzej
Top achievements
Rank 1
Andrzej asked on 28 Apr 2021, 06:17 PM

Hi,

I have burned some time trying to understand why ComboBox is not selecting predefined value. If myComboData is null/empty initially and loaded from remote API then predefined value is not selected.

Workaround 1: Set _selectedValue to -1 and then back to 2 to trigger selection.

Workaround 2: Wrap combo with if(myComboData != null).

Both seem dirty to me.

In samples (https://demos.telerik.com/blazor-ui/combobox/overview) we don't have a null checks.

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

@code {
	int _selectedValue { get; set; } = 2; // Preselected value
	IEnumerable<MyDdlModel> myComboData { get; set; } = Enumerable.Empty<MyDdlModel>();

	protected override async Task OnInitializedAsync()
	{
		myComboData = await LoadData();
		await base.OnInitializedAsync();
	}

	private async Task<IEnumerable<MyDdlModel>> LoadData()
	{
		await Task.Delay(1);
		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; }
	}
}


1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 29 Apr 2021, 06:07 AM

Hi Andrzej,

This will be fixed in our next release (2.24.0), you can check its portal page for more details.

 

Regards,
Marin Bratanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Mikael
Top achievements
Rank 1
commented on 01 Oct 2021, 06:34 AM

Hello!

Will this be fixed for the TelerikDropDownList as well?

Marin Bratanov
Telerik team
commented on 02 Oct 2021, 07:34 AM

Are you perhaps hitting this issue: https://feedback.telerik.com/blazor/1518099-selected-text-does-not-update-when-changing-the-data-collection? If yes, do click the Vote and Follow buttons on its page. If not, I suggest you open a new ticket where you can add a small snippet/sample to show the issue.

The original report, changed to a dropdownlist seems to work fine for me, Item 2 is selected initially (I tested with 2.27.0):

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

@code {
    int _selectedValue { get; set; } = 2; // Preselected value
    IEnumerable<MyDdlModel> myComboData { get; set; } = Enumerable.Empty<MyDdlModel>();

    protected override async Task OnInitializedAsync()
    {
        myComboData = await LoadData();
        await base.OnInitializedAsync();
    }

    private async Task<IEnumerable<MyDdlModel>> LoadData()
    {
        await Task.Delay(1);
        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; }
    }
}

Robert
Top achievements
Rank 1
commented on 03 Dec 2021, 06:42 AM

I am experiencing this problem with version 2.29 when the drop-down 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 />
</EditForm>

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();
    }
}

 

Component

 


@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; } } }

 

 


Tags
ComboBox
Asked by
Andrzej
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or