SfAccordion as a BindableLayout. Updating the ItemSource

[Thomas Carney]

They way I would expect this page to work would be: 

-  I click one of the arrows to transition to the next day

- The ObservableCollection (the ItemSource) is set to a new ObservableCollection with the values for  that day

-The UI updates to display the new item(s)

What actually happens:

The UI Does update, but it just adds the new item to the view without removing the one(s) that isn't in the itemsource anymore.

The code I use to update the collection: 

  CurrentOnSiteHours = new ObservableCollection<RefOnSiteHour>(RefOnSiteHours.FindAll(osh => osh.Date == currentDate));

Attachment: iPhone_12_Pro_iOS_14.4_20210416_074044_74f7e789.zip

[Lakshmi Natarajan]

Hi Thomas, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “The UI just adds the new item to the view without removing the one(s) that isn't in the itemsource anymore” from our side. We would like to inform you that the reported issue occurs due to the OnChildRemoved obsolete change in Xamarin.Forms. We have handled AccordionItems collection changes using OnChildRemoved which is marked as obsolete 4.8.0.1451 without even marking deprecated in previous versions.    

   

We suggest you to use the Xamarin.forms 4.8.0.1364 version in sample level to overcome the reported scenario or use the same Xamarin version that Syncfusion products supports unless you may require any other specific features of Xamarin that is available in a later release version. This is the long recommended sustainable and efficient solution.   

   

As of now, we are using Xamarin forms 4.5.0.617 in our source level. At each release we update to the latest stable Xamarin forms version which has the most number of downloads so that it is beneficial to the mass majority of users. We test for issues extensively in the decided version. For this release we decided to upgrade to 4.5.0.617. Likewise in the next release on end of December we would choose a newer version based on the number of downloads. So if the version under discussion or a later version has the higher number of downloads, we will surely upgrade to it. However this is all tentative and not a commitment on our parts. You can refer our release notes document like here Xamarin.Forms versions that Syncfusion products upgraded. You can check the release notes for each release for information related to version upgrade.     

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[Thomas Carney]

I've downgraded Xamarin Forms to 4.8.0.1364, but the issue persists. Not sure what you mean by 'sample level' as there isn't a pre-release of that version listed in Visual Studio Nuget Package Manager. I will also try to downgrade to 4.50617 and see if the issue still persists.

[Thomas Carney]

Downgraded to Xamarin.Forms 4.50617 and the issue still persists.

[Lakshmi Natarajan]

Hi Thomas, 

 

Sorry for the inconvenience caused. 

 

We have checked the reported query “I've downgraded Xamarin Forms to 4.8.0.1364, but the issue persists” from our side. We have used the Xamarin.Forms version 4.8.0.1364 and we could not reproduce the reported scenario at our side. We have attached the tested sample in the following link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164593/ze/164593-912576548 

 

Please check our sample and let us know if you still facing the same issue? If not, please modify our sample 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 Accordion XAML code snippets
• Share ItemsSource update code snippets
• Share Syncfusion and Xamarin.Forms version used

 

Regards, 

Lakshmi Natarajan 

 

[Thomas Carney]

Currently my code doesn't too different from the example, as far as basic set up goes. The main issue is that when I add items to the ObservableCollection everything works fine, but when I remove items from it/set the collection to a new collection, the changes the items are not removed from the UI, but the new items are added

My Accordion xaml:

            <syncfusion:SfAccordion x:Name="onSiteHourAccordion"

                                        DynamicSizeMode="Content"

                                        ExpandMode="Single" 

                                        VerticalOptions="FillAndExpand"

                                        BindableLayout.ItemsSource="{Binding CurrentOnSiteHours}">

                    <BindableLayout.ItemTemplate>

                        <DataTemplate>

                            <syncfusion:AccordionItem>

                                <syncfusion:AccordionItem.Header>

                                    <Grid BackgroundColor="{DynamicResource GridSecondaryBackground}">

                                        <Label HeightRequest="50"

                                               Text="{Binding UserOnJob.UserName}"

                                               TextColor="{DynamicResource MainTextColor}"

                                               VerticalTextAlignment="Center" />

                                    </Grid>

                                </syncfusion:AccordionItem.Header>

                                <syncfusion:AccordionItem.Content>

                                    <StackLayout>

                                        <FlexLayout JustifyContent="SpaceAround">

                                            <StackLayout>

                                                <Label  HorizontalTextAlignment="Center"

                                                        TextColor="{DynamicResource AccentColor}"

                                                        FontAttributes="Bold"

                                                        TextDecorations="Underline"

                                                        Text="Name" />

                                                <Picker BackgroundColor="{DynamicResource GridSecondaryBackground}"

                                                        ItemsSource="{Binding BindingContext.UsersOnJob, Mode=TwoWay, Source={x:Reference onSiteHourAccordion}}"

                                                        ItemDisplayBinding="{Binding UserName}"

                                                        SelectedItem="{Binding UserOnJob}"

                                                        TextColor="{DynamicResource MainTextColor}"

                                                        IsEnabled="{Binding BindingContext.ReportSubmitted, Source={x:Reference onSiteHourAccordion}, Converter={StaticResource invertBool}}" />

                                            </StackLayout>

                                            <StackLayout>

                                                <Label  HorizontalTextAlignment="Center"

                                                        TextColor="{DynamicResource AccentColor}"

                                                        FontAttributes="Bold"

                                                        TextDecorations="Underline"

                                                        Text="Date" />

                                                <DatePicker BackgroundColor="{DynamicResource GridSecondaryBackground}"

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

                                                            TextColor="{DynamicResource MainTextColor}"

                                                            IsEnabled="{Binding BindingContext.ReportSubmitted, Source={x:Reference onSiteHourAccordion},  Converter={StaticResource invertBool}}" />

                                            </StackLayout>

                                        </FlexLayout>

                                        <FlexLayout JustifyContent="SpaceAround">

                                            <StackLayout>

                                                <Label  HorizontalTextAlignment="Center"

                                                        TextColor="{DynamicResource AccentColor}"

                                                        FontAttributes="Bold"

                                                        TextDecorations="Underline"

                                                        Text="Client In Time" />

                                                <TimePicker BackgroundColor="{DynamicResource GridSecondaryBackground}"

                                                            Time="{Binding ClientInTimeSpan, Mode=TwoWay}"

                                                            TextColor="{DynamicResource MainTextColor}"

                                                            IsEnabled="{Binding BindingContext.ReportSubmitted, Source={x:Reference onSiteHourAccordion},  Converter={StaticResource invertBool}}" />

                                            </StackLayout>

                                            <StackLayout>

                                                <Label  HorizontalTextAlignment="Center"

                                                        TextColor="{DynamicResource AccentColor}"

                                                        FontAttributes="Bold"

                                                        TextDecorations="Underline"

                                                        Text="Staff Same" />

                                                <CheckBox x:Name="inTimeCheckBox"

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

                                                          HorizontalOptions="Center"

                                                          IsEnabled="{Binding BindingContext.ReportSubmitted, Source={x:Reference onSiteHourAccordion},  Converter={StaticResource invertBool}}">

                                                    <CheckBox.Behaviors>

                                                        <behaviors:CheckBoxBehavior Command="{Binding BindingContext.ClientInStaffSameCommand,  Source={x:Reference onSiteHourAccordion}}"

                                                                                    CommandParameter="{Binding OnSiteHoursID}" />

                                                    </CheckBox.Behaviors>

                                                </CheckBox>

                                            </StackLayout>

                                        </FlexLayout>

                                        <FlexLayout JustifyContent="SpaceAround">

                                            <StackLayout>

                                                <Label  HorizontalTextAlignment="Center"

                                                        TextColor="{DynamicResource AccentColor}"

                                                        FontAttributes="Bold"

                                                        TextDecorations="Underline"

                                                        Text="Client Out Time" />

                                                <TimePicker x:Name="outTimePicker"

                                                            BackgroundColor="{DynamicResource GridSecondaryBackground}"

                                                            Time="{Binding ClientOutTimeSpan, Mode=TwoWay}"

                                                            TextColor="{DynamicResource MainTextColor}"

                                                            IsEnabled="{Binding BindingContext.ReportSubmitted, Source={x:Reference onSiteHourAccordion},  Converter={StaticResource invertBool}}" />

                                            </StackLayout>

                                            <StackLayout>

                                                <Label  HorizontalTextAlignment="Center"

                                                        TextColor="{DynamicResource AccentColor}"

                                                        FontAttributes="Bold"

                                                        TextDecorations="Underline"

                                                        Text="Staff Same" />

                                                <CheckBox x:Name="outTimeCheckbox"

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

                                                          HorizontalOptions="Center"

                                                          IsEnabled="{Binding BindingContext.ReportSubmitted, Source={x:Reference onSiteHourAccordion},  Converter={StaticResource invertBool}}">

                                                    <CheckBox.Behaviors>

                                                        <behaviors:CheckBoxBehavior Command="{Binding BindingContext.ClientOutStaffSameCommand, Source={x:Reference onSiteHourAccordion}}"

                                                                                    CommandParameter="{Binding OnSiteHoursID}" />

                                                    </CheckBox.Behaviors>

                                                </CheckBox>

                                            </StackLayout>

                                        </FlexLayout>

                                        <FlexLayout JustifyContent="SpaceAround">

                                            <StackLayout>

                                                <Label  HorizontalTextAlignment="Center"

                                                        HorizontalOptions="Center"

                                                        TextColor="{DynamicResource AccentColor}"

                                                        FontAttributes="Bold"

                                                        TextDecorations="Underline"

                                                        Text="In Time" />

                                                <TimePicker BackgroundColor="{DynamicResource GridSecondaryBackground}"

                                                            Time="{Binding InTimeSpan, Mode=TwoWay}"

                                                            TextColor="{DynamicResource MainTextColor}"

                                                            IsEnabled="{Binding EnableInTime, Mode=TwoWay}" />

                                            </StackLayout>

                                            <StackLayout>

                                                <Label  HorizontalTextAlignment="Center"

                                                        HorizontalOptions="Center"

                                                        TextColor="{DynamicResource AccentColor}"

                                                        FontAttributes="Bold"

                                                        TextDecorations="Underline"

                                                        Text="Out Time" />

                                                <TimePicker Time="{Binding OutTimeSpan, Mode=TwoWay}"

                                                            TextColor="{DynamicResource MainTextColor}"

                                                            BackgroundColor="{DynamicResource GridSecondaryBackground}"

                                                            IsEnabled="{Binding EnableOutTime, Mode=TwoWay}" />

                                            </StackLayout>

                                        </FlexLayout>

                                    </StackLayout>

                                </syncfusion:AccordionItem.Content>

                            </syncfusion:AccordionItem>

                        </DataTemplate>

                    </BindableLayout.ItemTemplate>

                </syncfusion:SfAccordion>

[Thomas Carney]

Figured out my issue 🤦‍♂️. I didn't have the Expander package installed on my iOS and Android projects. Thanks for the time you took to help me. 

[Lakshmi Natarajan]

Hi Thomas, 

 

Thank you for the update. 

 

We are glad that the reported issue has been resolved at your side. Please let us know if you need further assistance. As always we are happy to help you out. 

 

Regards, 

Lakshmi Natarajan