We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load DetailsView ItemsSource asynchronously?

Platform: UWP |
Control: SfDataGrid |
.NET Framework: 4.5.1 |
Product Version: 12.1.0.43

The SfDataGrid’s DetailsViewExpanding event helps you to load the data or set ItemsSource of a DetailsView dynamically. You can use the DetailsViewSource property in GridDetailsViewExpandingEventArgs to set the itemsource for the DetailsViewDatagrid.

When the Data to be loaded in the DetailsView is downloaded from an external source or being read from a file, you may get a time delay. In such case, the Expanding event can be executed before the I/O processes get completes.

In this case, you can use Async and await to load the data with a time delay and hold the event from executing before the data gets loaded from an external source gets completed.

The await keyword ensures that no operations happen before the asynchronous method execution is completed.

The SfGrid_DetailsViewExpanding method runs synchronously until it reaches its first await expression. After await is reached, it is suspended until the awaited task is complete.

C#

//Listening to the DetailsViewExpanding Event.
//Making it Async with the Async and Await keyword to execute asynchronously.
//On accessing the DetailsViewSource property of GridDetailsViewExpandingEventArgs we can reset the ItemsSource of DetailsViewGrid
private async void SfGrid_DetailsViewExpanding(object sender, Syncfusion.UI.Xaml.Grid.GridDetailsViewExpandingEventArgs e)
{
      e.DetailsViewItemsSource.Clear();
      var list = new ObservableCollection<dynamic>();
      e.DetailsViewItemsSource.Add("Persons", list);
      var underlyingList = GetItems(list);
}
//We have Populated the data for the DetailsView Grid in this method asynchronously by holding the DetailsView ExpandingEvent
//till the data gets created or Loaded from an external source.
private async Task<ObservableCollection<dynamic>> GetItems(ObservableCollection<dynamic> dynamicList)
        {
            await Task.Delay(2000);
            dynamicList.Add(CreateDynamicObj("David", 1001, "Asst.Manager", 118));
            dynamicList.Add(CreateDynamicObj("Alex", 1002, "Senior Developer", 123));
            dynamicList.Add(CreateDynamicObj("Christopher", 1003, "Senior Developer", 121));
            dynamicList.Add(CreateDynamicObj("Mary", 1004, "Accountant", 120));
            dynamicList.Add(CreateDynamicObj("Angeline", 1005, "Asst.Manager", 105));
            dynamicList.Add(CreateDynamicObj("Andrew", 1006, "Manager", 103));
            dynamicList.Add(CreateDynamicObj("Michael", 1007, "Senior Developer", 124));
 
            return dynamicList;
        }

 

The declaration of GetItems() method adding the DetailsViewItemsSource asynchronously until the items are assigned to the underlying_List.

 

C#

private dynamic CreateDynamicObj(string name, int employeeid, string Details, int contactnumber)
        {
            ExpandoObject exp = new ExpandoObject();
            ((IDictionary<string, object>)exp).Add("Name", name);
            ((IDictionary<string, object>)exp).Add("EmployeeID", employeeid);
            ((IDictionary<string, object>)exp).Add("Details", Details);
            ((IDictionary<string, object>)exp).Add("ContactNumber", contactnumber);
            return exp;
        }

 

Sample Links:

WinRT

UWP

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile