Progress or Busy indicator for sfListView

[Emil]

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]

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. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/132338/ze/SfListViewSample2086305176  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

 

[Emil]

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]

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. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/132338/ze/SfListViewSample987864183  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav