1. Home
  2. Forum
  3. Xamarin.Forms
  4. First Item in grouped listview dissapears

First Item in grouped listview dissapears

Hi,

I'm experiencing a strange problem. I have a grouped listview, each row contains a label and an editable field. Everything works as i'd expect, EXCEPT, if i update the first item in the list it dissapears. If I collapse and expand the group, it comes back.

The same behaviour doesn't happen for any subsequent groups, so say if there are 3 or 4 groups in the list, i can update the first item of each group except the first one.

Also - when the item dissapears, if i the update the second item (now appears as the first) it will also dissapear, and then return when i collapse/expand the group as well. 

Is this a bug, or expected behavior?

Thanks,
Mark

16 Replies 1 reply marked as answer
SS SaiGanesh Sakthivel Syncfusion Team April 6, 2021 01:52 PM UTC

Hi Mark,

Thank you for contacting syncfusion support.

#Regarding First Item in grouped listview dissapears
We would like to inform you that we need more details to check further at our side. Please share the following details which will be help us to check on it and provide you the solution as soon as possible.  
  
·       Share the project file in zip format. 
·       Share the xaml file, viewmodel and model class in project. 
·       Share the issue replicate video and issue replicate platform.  
·       Share the syncfusion version and Xamarin form version used in sample. 
   
Regards,
SaiGanesh Sakthivel 


MA Mark July 13, 2021 12:30 PM UTC

Hi, i know it's been ages, but a little bit to add on to this. I believe this occurs in conjunction with the shimmer control. I'm going to work around it myself with a different control to display the loading, but if anyone comes across this issue i'd suggest removing the shimmer control. 


Theoretically you could replicate this by:

  1. Create a grouped listview
  2. Put the items of the listview in shimmer controls
  3. Trigger the shimmer for the first item, and watch it completely disappear.



LN Lakshmi Natarajan Syncfusion Team July 14, 2021 11:26 AM UTC

Hi Mark, 
 
Thank you for the update. 
 
We have checked the reported query “First Item in grouped listview dissapears” from our side. We have prepared a sample based on the shared information and we are unable to replicate the reported scenario at our side. 
 
Please find the tested sample and video in the following link, 
 
Please check our sample and let us know if you still facing the same issue? If not, please modify our sample based your scenario and revert us back with the following details which would be helpful for us to check on it and provide you the solution as soon as possible. 
  • Share ListView and shimmer code snippets
  • Share device configuration details
  • Share issue reproducing video
  • Share Syncfusion and Xamarin.Forms versions
 
Regards, 
Lakshmi Natarajan

MA Mark July 14, 2021 11:42 AM UTC

Here you go, it's when you use a custom view on a grouped header. Changes made that should replicated it. I've added in the gesture recogniser on the line too which should trigger the shimmer. 


If pressing the button doesn't make the first row disappear, then click on the first row.


Attachment: ListViewXamarinrepo_d9bdda6f.zip

LN Lakshmi Natarajan Syncfusion Team July 15, 2021 12:01 PM UTC

Hi Mark, 
 
Thank you for the update. 
 
We have checked the shared sample and we could reproduce the reported scenario at our side. On further analysis, we would like to inform you that the reported scenario occurs due to using the custom shimmer view in the ItemTemplate with AutoFitMode as DynamicHeight. When using DynamicHeight, the SfListView will get the size of the elements loaded in the ItemTemplate to measure and layout the items. In this case, we suspect that the ListView does not get proper height from the CustomView to measure the run time changes properly. Hence, we suggest you to set the HeightRequest for the SfShimmer to overcome the reported scenario. 
 
Please refer to the following code snippets for more reference, 
 
<syncfusion:SfListView x:Name="listView"  
                        AutoFitMode="DynamicHeight" 
                        ItemsSource="{Binding ContactsInfo}" 
                        SelectionMode="None"> 
    <syncfusion:SfListView.ItemTemplate> 
        <DataTemplate> 
            <shimmer:SfShimmer x:Name="shimmer"  
                               HeightRequest="50"  
                               IsActive="{Binding IsActive}"> 
                <shimmer:SfShimmer.CustomView> 
                    <Grid Padding="20" 
                            ColumnSpacing="15" 
                            RowSpacing="10" 
                            HeightRequest="50"  
                            VerticalOptions="CenterAndExpand"> 
 
                        <BoxView BackgroundColor="Gray" 
                                    HeightRequest="10" 
                                    HorizontalOptions="Start" 
                                    WidthRequest="300" /> 
                    </Grid> 
                </shimmer:SfShimmer.CustomView> 
                <shimmer:SfShimmer.Content> 
                    <StackLayout> 
                       ... 
                    </StackLayout> 
                </shimmer:SfShimmer.Content> 
            </shimmer:SfShimmer> 
        </DataTemplate> 
    </syncfusion:SfListView.ItemTemplate> 
</syncfusion:SfListView> 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


Marked as answer
MA Mark July 17, 2021 11:09 AM UTC

Hi Lakshmi,


That logically makes sense to me, unfortunately it doesn't entirely work for my actual app though. The item retains in the list, however, it ends up at the bottom of the group which still isn't ideal. 


I also can't force the height in the listview, i have some slight variations in height if text needs to wrap, so ultimately it wouldn't work for me either.


Cheers,

Mark


RK Ranjith Kumar Durairaj Syncfusion Team July 19, 2021 02:36 PM UTC

Hi Mark,

Thank you for the update.

We are currently validating this. We will update you with further details on or before July 22, 2021. We appreciate your patience until then.



Regards,
Ranjith Kumar


LN Lakshmi Natarajan Syncfusion Team July 23, 2021 04:06 AM UTC

Hi Mark, 
 
Sorry for the delay caused. 
 
We are currently analyzing the reported scenario in both SfListView and SfShimmer controls. We need some more to analyze completely and update you further details on or before July 26, 2021. We appreciate your patience until then. 
 
Lakshmi Natarajan 
 


LN Lakshmi Natarajan Syncfusion Team July 26, 2021 02:42 PM UTC

Hi Mark, 
 
Thank you for your patience.  
 
We have checked the reported scenario in both sample and source level. We suggest you to load the SfShimmer inside the Grid to overcome the reported scenario. Please refer to the following code snippets for the same, 
 
<syncfusion:SfListView x:Name="listView" 
                        AllowGroupExpandCollapse="True" 
                        AutoFitMode="DynamicHeight" 
                        IsStickyHeader="True" 
                        ItemsSource="{Binding ContactsInfo}" 
                        SelectionMode="None"> 
                 
    <syncfusion:SfListView.ItemTemplate> 
        <DataTemplate> 
            <Grid> 
                <shimmer:SfShimmer x:Name="shimmer" IsActive="{Binding IsActive}"> 
                    <shimmer:SfShimmer.CustomView> 
                        <Grid Padding="20" 
                            ColumnSpacing="15" 
                            HeightRequest="50" 
                            RowSpacing="10"> 
 
                            <BoxView BackgroundColor="Gray" 
                                    HeightRequest="10" 
                                    HorizontalOptions="Start" 
                                    WidthRequest="300" /> 
                        </Grid> 
                    </shimmer:SfShimmer.CustomView> 
                    <shimmer:SfShimmer.Content> 
                        ... 
                    </shimmer:SfShimmer.Content> 
                </shimmer:SfShimmer> 
            </Grid> 
        </DataTemplate> 
    </syncfusion:SfListView.ItemTemplate> 
</syncfusion:SfListView> 
  
We have attached the tested sample in the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


MA Mark December 8, 2021 12:57 AM UTC

Hi,


Sorry for a long delay, haven't had a chance to prioritise this until now. Unfortunately it doesn't appear to work for my app, I've surrounded the shimmer control with a grid and the same behaviour still occurs. The first entry in the group ends up at the bottom when the shimmer is activated.


Cheers,

Mark


MA Mark December 8, 2021 09:19 AM UTC

I've been able to modify your sample to replicate the problem, which appears to only occur with custom header and/or group header.


Click on the first contact in the first group, and watch them disappear.


In my app this also happens, until i remove the custom group header and header templates.


Attachment: ListViewXamarinReplicate_bd4575a3.zip

LN Lakshmi Natarajan Syncfusion Team December 8, 2021 04:36 PM UTC

Hi Mark, 
 
Sorry for the inconvenience caused. 
 
We could reproduce the reported scenario on our side. Currently, we are validating the reported scenario in our source level. We will check completely and update you further details on December 10, 2021. We appreciate your patience until then. 
 
Lakshmi Natarajan 
 


MA Mark December 8, 2021 11:45 PM UTC

All good, glad to hear you're able to replicate too at least, look forward to a response! 


Thanks,

Mark


LN Lakshmi Natarajan Syncfusion Team December 13, 2021 12:53 PM UTC

Hi Mark, 
 
The reported issue occurs when updating the Xamarin.Forms to version 5.0. Also, you can overcome the reported scenario by loading the Shimmer control in the Frame control. Please refer to the following code snippets for more reference, 
 
<syncfusion:SfListView x:Name="listView" 
                        AllowGroupExpandCollapse="True" 
                        AutoFitMode="DynamicHeight" 
                        IsStickyGroupHeader="True" 
                        IsStickyHeader="True" 
                        ItemsSource="{Binding ContactsInfo}" 
                        SelectionMode="None"> 
 
    <syncfusion:SfListView.ItemTemplate> 
        <DataTemplate x:DataType="local:Contacts"> 
            <Frame> 
                <shimmer:SfShimmer x:Name="shimmer" IsActive="{Binding IsActive}"> 
                    <shimmer:SfShimmer.CustomView> 
                        <Grid Padding="20" 
                                ColumnSpacing="15" 
                                HeightRequest="50" 
                                RowSpacing="10"> 
 
                            <BoxView BackgroundColor="Gray" 
                                        HeightRequest="10" 
                                        HorizontalOptions="Start" 
                                        WidthRequest="300" /> 
                        </Grid> 
                    </shimmer:SfShimmer.CustomView> 
                    <shimmer:SfShimmer.Content> 
                        ... 
                    </shimmer:SfShimmer.Content> 
                </shimmer:SfShimmer> 
            </Frame> 
        </DataTemplate> 
    </syncfusion:SfListView.ItemTemplate> 
</syncfusion:SfListView> 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


MA Mark December 13, 2021 10:55 PM UTC

Hi Lakshmi,


Thanks for that update, I've found a bit more information. I originally had a Frame wrapping the shimmer with padding of 0, but still had the issue. When changing the padding to 1, it appears to have resolved the issue. 


It's not ideal as I don't really want to wrap any padding around the shimmer, but i can make this work if this is the only way.


Cheers,

Mark


LN Lakshmi Natarajan Syncfusion Team December 14, 2021 02:40 PM UTC

Hi Mark, 
 
We have checked the sample attached in this update and it works as expected with the frame (without padding). Please see the code snippets in our previous update. If your requirement does not require padding, please do not define the Padding property. 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


Loader.
Up arrow icon