SfListView not updating View when ObservableCollection update in VM

(1) In the attached project, when the Blue button is pressed the ObservableCollection binding data to the SfListView gets updated (this actually does happen), however, the View does not reflect this change. I have implemented INotifyPropertyChanged using Fody.Propertychanged in the ViewModelBase. When an item is changed, can you also verify if the ListView row size adjusts accordingly please? I have noticed that if the changed text overflows, the rows below don't autosize. Please advise.

(2) Weird issue, in the constructor where I am setting the data for the ObservableCollection, if you uncomment the second Data line and comment out the first, the Text displayed in the SfListView gets automatically cut off towards the end - words 'ex ea'. However, the other Data line gets displayed fully just fine.

ContrastCollection.Add(new ContrastClarity()
{
Id = i.ToString(),
Data = $"CLARITY quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, {i}"

// IN THIS LINE, the SfListView stops displaying the text after here--------------------------------------------------------------------------------------------------------------------------------------------------------|
//Data = $"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {i}"

});

Attachment: TestSfListView_35911ee0.zip

1 Reply 1 reply marked as answer

LN Lakshmi Natarajan Syncfusion Team June 7, 2021 09:54 AM UTC

Hi Reza, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported queries from our side. Please find the response in the following table, 
 
Query 
Response 
In the attached project, when the Blue button is pressed the ObservableCollection binding data to the SfListView gets updated (this actually does happen), however, the View does not reflect this change 
We suggest you to invoke the PropertyChanged event for the model properties to update the run time changes in the UI. 
 
Please refer to the following code snippets, 
public class ContrastClarity : ViewModelBase 
{ 
    private string id; 
    private string data; 
 
    public string Id 
    { 
        get => id; 
        set { id = value; OnPropertyChanged(); } 
    } 
 
    public string Data 
    { 
        get => data; 
        set { data = value; OnPropertyChanged(); } 
    } 
} 
 
You can also refer to our user guidance document regarding the same, 
 
When an item is changed, can you also verify if the ListView row size adjusts accordingly please? I have noticed that if the changed text overflows, the rows below don't autosize. Please advise. 
 
The ListViewItems size can be adjusted based on the run time changes by using the AutoFitMode as DynamiHeight. 
 
Please refer to the following code snippets for the same, 
<syncfusion:SfListView 
x:Name="collectionView" 
AllowSwiping="True" 
AutoFitMode="DynamicHeight" 
ItemsSource="{Binding ContrastCollection}" 
SelectionMode="None"> 
 
Please refer to our user guidance documents regarding the DynamicHeight property, 
 
in the constructor where I am setting the data for the ObservableCollection, if you uncomment the second Data line and comment out the first, the Text displayed in the SfListView gets automatically cut off towards the end - words 'ex ea'. However, the other Data line gets displayed fully just fine. 
We have checked the reported scenario by uncommenting the second line. We could reproduce the reported scenario in iOS platform. On further analysis, the issue occurs when using Padding for the Label. Also, we could reproduce the same scenario in Xamarin.Forms ListView.  
 
We suggest you to use Margin for the Label to overcome the reported issue. Please refer to the following code snippets for the same, 
 
<syncfusion:SfListView.ItemTemplate> 
    <DataTemplate> 
        <StackLayout Spacing="0"> 
            <Label 
            Margin="12" 
            FontSize="Small" 
            Text="{Binding Data}" /> 
 
            <BoxView 
            HeightRequest="1" 
            Color="LightGray" /> 
        </StackLayout> 
    </DataTemplate> 
</syncfusion:SfListView.ItemTemplate> 
 
Screenshot 
 
  
We have attached the modified sample with video in the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


Marked as answer
Loader.
Up arrow icon