This is a migrated thread and some comments may be shown as answers.

DropDownList Data Binding to async

1 Answer 169 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 30 Jan 2021, 08:37 PM

If seems that if databind to an ObservableCollection returned from a (synchronous) property, the DropDownList is updating as the ObservableCollection changes.

If I databind to an ObserverableCollection returned from an asynchronous method, I have to run StateHasChanged() to force the DropDownList to refresh its datasource.  

Here are some snippets to demonstrate:

public class ApiDataSourceModel{

public int MyValueField { get; set; }

public string MyTextField { get; set; }

}

 

public class DropDownModel
        public string Value { get; set; }
        public string Text { get; set; }
    }

 

        public async Task<ObservableCollection<DropDownModel>> GetApiDataSource()
        {

//Tried returnApiDataSource as List and even here as ObservableCollection to try to get to refresh DropDownList
                ObservableCollection<ApiDataSourceModel> returnApiDataSource = await GetMyApiDataSource();
                if (returnApiDataSource is not null)
                {
                    return returnApiDataSource.Select(c => new DropDownModel() { Value = MyValueField.ToString(), Text = MyTextField  }).ToList().ConvertIEnumerableToObservableCollection();
                }
                else
                    return default(ObservableCollection<Models.System.DropDownModel>);
        }

//Custom Extension
        public static ObservableCollection<T> ConvertIEnumerableToObservableCollection<T>(this IEnumerable<T> iEnumerableCollection)
        {
            if (iEnumerableCollection is not null)
                return new ObservableCollection<T>(iEnumerableCollection);
            else
                return null;
        }

 

string selectedApiDataSourceValue;

   protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {

ObservableCollection<DropDownModel> sourceForDdl = await GetApiDataSource();

//This won't update DDL without StateHasChanged() even though DDL data is an Observable collection that has been updated.

StateHasChanged();

}

}

DropDownList

  <TelerikDropDownList @bind-Value="@selectedApiDataSourceValue"
                                                     Id="ApiDataSourceField"
                                                     Data="@sourceForDdl ">
                                </TelerikDropDownList>

 

 

1 Answer, 1 is accepted

Sort by
0
Nadezhda Tacheva
Telerik team
answered on 03 Feb 2021, 05:49 PM

Hi Gregory,

From the current setup, it looks like there might be two possible reasons for the described behavior:

  • When working with Observable collection, the Telerik components subscribe to its CollectionChanged event to update. This means that the component will re-render only if the Observable collection's  .Add(), .Remove() and .Clear() methods are called. In the below example, these methods are not used, therefore the CollectionChanged is not fired and the component does not re-render.

  • The OnAfterRender and OnAfterRenderAsync methods, as per the framework's lifecycle do not call the StateHasChanged. This is normally the place to invoke any Javascript operations.
    You might try performing the data generation in OnInitializedAsync or (as you do) invoke the StateHasChanged yourself if you still want to use OnAfterRenderAsync.

If you have tried the above mentioned but you are still facing some issues, you can send us runnable example where the issue is reproducible, so we can investigate further.

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DropDownList
Asked by
Greg
Top achievements
Rank 1
Answers by
Nadezhda Tacheva
Telerik team
Share this question
or