After removing item from IList<Photos> SfCarousel crashes with out of range exception.

[Jesse Knott]

Hello, I am sure I could prevent this issue, if there were simply an update command I could call to refresh the carousel's internal list of items.

Here is some quick pseudo code to illustrate my process...

app.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
  .......
    xmlns:syncfusion="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms"
  .......
            <DataTemplate x:Key="itemTemplate">
                <StackLayout Orientation="Vertical">
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer CommandParameter="{Binding Path=Path}" Tapped="OnTapped" />
                    </StackLayout.GestureRecognizers>
                    <Image
                        Aspect="AspectFit"
                        HeightRequest="275"
                        Source="{Binding Path=Path}" />
                    <Label Text="{Binding Path=FileName}" />
                </StackLayout>
            </DataTemplate>
        </ResourceDictionary>
  .........

                    <Label Text="Images" />
                    <syncfusion:SfCarousel
                        x:Name="carousel"
                        HeightRequest="300"
                        ViewMode="Default"
                        ItemTemplate="{StaticResource itemTemplate}"
                        WidthRequest="400" />

  .....

Then in App.cs

          public class Photos

          {

               string Path {get; set; }

               string FileName {get; set;}

          }

          public MyApp()

          {

               public async void DoSomething()

               {

                    //List is populated with several images (paths and filenames)

                    private IList<Photos> lPhotos = await new PhotoRepository().GetItems();

               }

              

               public async void OnTapped(object sender, EventArgs e)

               {

                    //User clicked on the delete this photo option

                    lPhotos.Remove(lPhotos.First(x => x.Path.Equals(((TappedEventArgs)e).Parameter.ToString())));

               }

                        

          }

The image still is showing in the carousel, and if the user swipes around again, it will throw the exception because the display carousel has 8 items, but the lPhotos list only has 7.

If there were a method to force an update to the display or redraw it, this could be prevented.

Perhaps I'm just being dense and overlooked such a method, but any feedback would be greatly appreciated!

Cheers!

[Muneesh Kumar G]

Hi Jesse Knott, 

Greetings, we have checked the reported issue “Carousel throws index exception if any item is removed” from our side. We are unable to reproduce the reported issue in our end. We have prepared the simple sample with given details. Please check with the sample and if the issue mentioned occurs in different scenario. Please modify the sample with the issue reproducing sample which will be helpful for us to analyze further and provide an appropriate solution. 

 

Sample Link: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Carousel_Sample-1499150417 

 

Please check the above sample and let us know if you require any further assistance on this. 

 

Thanks, 

Muneesh Kumar G. 

[Jesse Knott]

Thanks for the sample, it actually clarified another non related problem I was working on! LOL

Sadly, however I am still having issues, with the collection not updating when I add a photo to the list.

Pseudo code.

     public void async Take picture()

     {

          ...Do camera stuff...

          Photos image = new Photos();

          image.name = camerastuff.filename;

          image.source = byte[]Image;

          image.path = camerastuff.pathtoimage;

          image.category = (int)enuCategory.Ocilloscope;

          // Add the image object to the database.

          await PhotoRepository.AddItem(image).ConfigureAwait(false);

         

          // Clear the images list.

          lPhotos.Clear();

         

          // repopulate the list with the images from the database.

          lPhotos = new ObservableCollection(await PhotoRepo.GetItemByParentID((int)ParentId, (int)enuCategory.Ocilloscope).ConfigureAwait(true));

          //Refesh the carousel with the list of images.
          carousel.ItemsSource = lPhotos;

          carousel.DisplayMemberPath = "path";

     }

The above code never updates the list of carousel images. I've also tried doing it in a number of other ways. I've tried just adding the image to my list lPhotos, hoping the carousel would automatically detect the added item, I've tried updating the carousel directly form the database, (performing the repository GetItemByParentID call directly into the ItemsSource).

Is there any method I can call to force the carousel to update it's view, or re-enumerate it's list?

Thanks again!

[Muneesh Kumar G]

Hi Jesse, 

  

We have modified the sample using Take Photo method. And the permission needs to be granted for Storage in device while installing the application. Please have the sample from the below link, 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted_8_2-1590851251 

 

Please check with the sample and let us know if you have any concern. 

 

Thanks,  

Muneesh Kumar G