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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Progress or Busy indicator for sfListView

Thread ID:

Created:

Updated:

Platform:

Replies:

132338 Aug 28,2017 12:38 AM UTC Aug 29,2017 12:12 PM UTC Xamarin.Forms 3
loading
Tags: SfListView
Emil
Asked On August 28, 2017 12:38 AM UTC

Is there any built in Busy Indicator for Sflistview? I dont want to display for entire page but only for sfListView if something like that is possible. because I am having multiple Sflistview on a page and I load data in OnAppearing event of the page asyncrounously. one sfListView gets loaded after others so I want to display on this one that it is busy until it gets loaded

Dinesh Babu Yadav [Syncfusion]
Replied On August 28, 2017 11:10 AM UTC

Hi Emil, 
 
Thank you for using Syncfusion Products. 
 
SfListView do not have inbuilt support for showing busy indicator while items are asynchronously added into the ItemsSource property. However, you can achieve the reported requirement at sample level by maintaining the Boolean property(Example: IsLoading) in the ViewModel class. When the items are added asynchronously, set the IsLoading property as true and at the end, reset the value to false which denotes that the items are added into the SfListView. Then bind the IsLoading property with the binding mode as “TwoWay” to the View in the XAML page as like below code example. 
 
Code Example[C#]: 
bool isLoading = false; 
 
public bool IsLoading 
{ 
  get { return isLoading;} 
  set 
  { 
     isLoading = value; 
     OnPropertyChanged("IsLoading"); 
  } 
} 
 
public ContactsViewModel() 
{ 
  contactsinfo = new ObservableCollection<Contacts>(); 
  LoadMoreData(); 
} 
 
public async void LoadMoreData() 
{ 
  IsLoading = true; 
  await Task.Delay(3000); 
  for (int i = 0; i < 40; i++) 
  { 
    var contact = new Contacts(); 
    contact.UserId = Id++; 
    contact.ContactName = CustomerNames[i]; 
    contactsinfo.Add(contact); 
  } 
  IsLoading = false; 
} 
 
Code Example[XAML]: 
<Grid> 
<syncfusion:SfListView x:Name="listView" ItemSize="60" 
                        ItemsSource="{Binding ContactsInfo}"> 
   <syncfusion:SfListView.ItemTemplate> 
     <DataTemplate> 
       <Grid x:Name="grid" RowSpacing="1"> 
…        
       </Grid> 
     </DataTemplate> 
   </syncfusion:SfListView.ItemTemplate> 
</syncfusion:SfListView> 
<Grid x:Name="grid" IsVisible="{Binding IsLoading,Mode=TwoWay}"  
       HorizontalOptions="Center" 
       VerticalOptions="Center" BackgroundColor="Blue"> 
     <Label Text="Loading" TextColor="White"/> 
</Grid> 
</Grid> 
 
The above code example loads the Loading text in the view until the items are added into the SfListView. For your reference, we have attached the sample and you can download it from the below link. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 


Emil
Replied On August 28, 2017 03:42 PM UTC

Hi Dinesh,


thanks for your great suggestion. I am curious if somethin similar is not possible using Sf busyindicator? Is it working for entire page only?

thanks,


Emil


Dinesh Babu Yadav [Syncfusion]
Replied On August 29, 2017 12:12 PM UTC

Hi Emil, 
 
Thanks for the update. 
 
You can use the SfBusyIndicator control instead of custom busy indicator which we have provided in previous update, while items are asynchronously added into the ItemsSource property as like below code snippet.  
 
Yes, the indicator gets displayed for the entire page and you can also customize it for different views in the page by customizing the grid as per your requirement. 
 
Code Example[XAML]: 
<Grid> 
  <syncfusion:SfListView x:Name="listView" FooterSize="40" ItemSize="60" 
                         ItemsSource="{Binding ContactsInfo}"> 
  </syncfusion:SfListView> 
  <busyindicator:SfBusyIndicator x:Name="busyindicator"  
                                 AnimationType="SlicedCircle"   
                                 IsVisible="{Binding IsLoading,Mode=TwoWay}" 
                                 IsBusy="{Binding IsLoading,Mode=TwoWay}" 
                                 ViewBoxWidth = "20" ViewBoxHeight="20"  
                                 TextColor="Maroon" /> 
</Grid> 
 
For your reference, we have modified the sample with the above code example and you can download it from the below link. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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

;