SfListView containing sfradio buttons changes values of other radio button values belongs to diffrent item

[Bahadur Singh Sekhon]

I have list view with about 20 items in it and each item has three radio buttons. It works fine in xamarin forms default list view but SfListView seems to have a bug. If In the UI I tick/untick radio buttons for 4-5 items, than suddenly the radio buttons for some of the items at the bottom of the list gets ticked/unticked. I hope somebody knows what is going on. Just to mention it wokrs fine for 4-5 items in the SfListview

[Suthi Yuvaraj]

Hi Bahadur, 

  

Thank you for using  Syncfusion products. 

 

  

We have checked the reported query “SfListView containing sfradio buttons changes values of other radio button values belongs to different item” from our side in both SfListView and framework level. We would like to inform you that we are facing the issue when using Xamarin.Forms ListView and RadioButton controls with RecycleElements. 

  

Please refer to the framework issue report for more reference, 

Bug report: https://github.com/xamarin/Xamarin.Forms/issues/11467 

 

  

MeanWhile, We would like to inform you that the SfListView is completely developed with UI Virtualization(Item recycling) concept and it only creates the element only which are in view on initial loading. While scrolling, we have cache the created elements and recycled it by updating only the BindingContext of the SfListView item. In this case, while scrolling, the IsChecked value will be updated and caused the reported scenario. 

 

We suggest you to overcome the reported scenario by skipping the reusing while scrolling by using the ListViewCachingStratedy as CreateNewTemplate.  

  

Please refer to the following code snippets to overcome the reported scenario, 

<syncfusion:SfListView x:Name="listView" ListViewCachingStrategy="CreateNewTemplate" ItemsSource="{Binding BookInfo}"> 

    <syncfusion:SfListView.ItemTemplate> 

        <DataTemplate> 

            <StackLayout Orientation="Horizontal" > 

                <syncfusion1:SfRadioButton IsChecked="{Binding IsChecked}" CheckedColor="DarkGreen" UncheckedColor="Gray"/> 

                <Label Text="{Binding BookDescription}" BackgroundColor="White" TextColor="Black"/> 

            </StackLayout> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

</syncfusion:SfListView> 

  

  

Also we have attached the workable sample Link  for your reference  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/aa-736827670.zip 

  

You can also refer to our user guidance document regarding the same, 

UG link: https://help.syncfusion.com/xamarin/listview/scrolling#how-to-handle-the-recycle-of-the-listview-items 

  

Please let us know if you need further assistance. 

  

Regards, 

Suthi Yuvaraj 

[Bahadur Singh Sekhon]

Hi Suthi,

Thanks a million for your reply and knowledge share.

As you had mentioned that sflistview recycles the template and it only creates first 10-15 objects and then it just updates the binding values, on top of that when you scroll down the list the hidden radio buttons gets unchecked/checked/unexpected behaviour, which adds more to the current situations.

Anyway along with using a new radioGroupKey for the template/ ensuring for each cached instances (10-15) would have its own unique radio group key, I had to implement some extra checks for binded properties for radio buttons as below:

 public bool IsOnline

        {

            get => _isOnline;

            set

            {

                if (_isOnline != value)

                {

                    if (value || this.isOffline || this.isBusy)

                    {

                        isOnLeave = value;

                        OnPropertyChanged(nameof(User.IsOnline);

                    }

                }

            }

        }

This issue can occur in both SfListview and xamarin listview. 

1. issue due to caching of the template -- Fix as you had mentioned or ensure new  radio groupkey for each template instance/ for each radio button group you display.
2. on scroll the radiobuttons those gets away from the screen their values gets changed. --Fix use extra checks on the radio button properties.

Kind regards,

Bahadur

[Suthi Yuvaraj]

Hi Bahadur,  

  

Thank you for the update.  

   

In SfListView , reported scenarios could not be handled since it is template oriented component and the reported cases should be handled in SfRadioButton component itself so we are currently checking with the respective team for SfRadioButton inside SfListView. We will check and update you further details in two business days (October 14, 2021). We appreciate your patience until then.  

  

Regards, 

Suthi Yuvaraj. 

[Bahadur Singh Sekhon]

Hi Suthi,

Thanks for follow up, I will look forward to hear from you.

Yes, it makes perfect sense that the radio button component should be able to handle the scenarios and it is a bug in the xamarin forms component rather than Syncfusion component.

Kind regards,

Bahadur 

[Devakumar Dhanapoosanam]

Hi Bahadur, 

 

Thanks for your update. 

 

We would like to share the below example for your requirement, with the help of updating the IsChecked property in ItemsSource from SfListView’s SelectionChanged event and remove the default touch support in SfRadioButton by setting InputTransparent as true. Please refer the code example below. 

 

XAML: 

<sfListView:SfListView 

            x:Name="ctrFieldValue" SelectionBackgroundColor="Transparent" 

            ItemSpacing="6" SelectionChanged="ctrFieldValue_SelectionChanged" 

            Loaded="ctrFieldValue_Loaded"> 

            <sfListView:SfListView.ItemTemplate> 

                <DataTemplate> 

                    <sfButton:SfRadioButton InputTransparent="True" 

                        HorizontalOptions="Start" 

                        IsChecked="{Binding IsChecked, Mode=TwoWay}" 

                        Text="{Binding DisplayName}" /> 

                </DataTemplate> 

            </sfListView:SfListView.ItemTemplate> 

</sfListView:SfListView> 

 

C#: 

void ctrFieldValue_SelectionChanged(System.Object sender,  

                     Syncfusion.ListView.XForms.ItemSelectionChangedEventArgs e) 

{ 

            var itemsSource = ctrFieldValue.ItemsSource as List<CheckBoxField>; 

 

            foreach (CheckBoxField item in itemsSource) 

            { 

                if (e.AddedItems[0] != item) 

                { 

                    item.IsChecked = false; 

                } 

                else 

                { 

                    item.IsChecked = true; 

                } 

            } 

}  

 

Please find the below sample for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169525/ze/1695251054558823.zip  

 

Please let us know if you need any assistance on this. 

 

Regards, 

Devakumar D 

[Bahadur Singh Sekhon]

Hi Devakumar,

Much appreciated your help for finding us a solution.

Thanks to the rest of the Syncfusion team too.

 Kind regards,

Bahadur

[Suthi Yuvaraj]

Hi Bahadur, 

  

Thank you for the update. 

  

We are glad that our solution meets your requirement. Please let us know if you need any further update. As always we are happy to help you out. 

  

Regards, 

Suthi Yuvaraj.