Databound items do not show until user scrolls

[Tony]

I have a fairly simple scenario, where a RadCarousel's ItemsSource is databound to an ObservableCollection of items in the ViewModel. The RadCarousel specifies a simple item template that shows a button image with text below it. The RadCarousel is using all default options and styles other than that ItemTemplate.

The problem I witness is that when the view loads, the RadCarousel appears to be empty, although I have a single item in my ObservableCollection. If I scroll the RadCarousel or use the navigation buttons, the single item pops into view and does appear normally.

Has anyone else ever seen this behavior?

For record, I'm using WPF 4 with the Q3 2011 release (2011.3.1116.40)

EDIT: I've also tried this with multiple items in the collection. The same behavior is exhibited.

Thanks in advance...
-Tony

[Maya]

Hello Tony,

Actually, that would be the expected behavior. If you want to have an item displayed immediately on loading, you can try one of the following approaches:

void MyRadCarousel_Loaded(object sender, RoutedEventArgs e)
{
    //Option 1
    this.MyRadCarousel.BringDataItemIntoView(this.carouselMilan.Items[0]);
    //Option 2
    this.MyRadCarousel.FindCarouselPanel().MoveBy(3);
    //Option 3
    this.MyRadCarousel.FindCarouselPanel().PageDown();
    //Option 4
    this.MyRadCarousel.FindCarouselPanel().LineDown();
}

All the best,
Maya
the Telerik team

[Tony]

Thanks for the quick reply. I'm afraid none of the options you've posted work for us, though. I've tried each option, verified the Loaded event was firing, verified there were items in the Carousel, but none of them are visible until the user either scrolls or uses the navigation controls. The behavior is exactly the same as before. Why would this be?

[Maya]

Hello Tony,

I am attaching a sample project illustrating my attempt to get the same behavior as the one you described. Unfortunately, I was not able to. Could you take a look at the application and verify whether you can reduce the issue on it ? Am I missing something ? 

Greetings,
Maya
the Telerik team

[N Mackay]

Hi,

I've upgraded our project to the latest version of WPF Rad Controls VS2010 SP1 (.NET4 XP SP3) and I get the exact same behaviour.

I was just testing the app to see if it was compatible with the latest controls.

It worked fine until I upgraded.

I tried your suggested solutions but they don't have any effect, you have to use the mouse scroll wheel to bring items into view.

Regards,
Norman.

                <DataTemplate x:Key="CarouselItemTemplate">
                <Grid x:Name="grid" Height="550" HorizontalAlignment="Left" Width="600">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding Path=VesselName}" HorizontalAlignment="Center" Margin="5" FontSize="14" />
                        <Image Grid.Row="1" Source="{Binding Path=Filename}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5" ></Image>

                    </Grid>
                </Grid>
            </DataTemplate>

               <telerik:RadCarousel Grid.Row="0" Name="_radcarousel_vessel"
                             ItemTemplate="{StaticResource CarouselItemTemplate}"
                             HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" VerticalAlignment="Top">
            <telerik:RadCarousel.ReflectionSettings>
                <telerik:ReflectionSettings Visibility="Visible"/>
            </telerik:RadCarousel.ReflectionSettings>

            <telerik:RadCarousel.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:RadCarouselPanel AutoLoadItems="False" />
                </ItemsPanelTemplate>
            </telerik:RadCarousel.ItemsPanel>
        </telerik:RadCarousel>

[N Mackay]

Maya,

I edited your example and your sample app doesn't work now either, the call below has no effect.

Regards,
Norman.

this.myRadCarousel.FindCarouselPanel().MoveBy(3)

XAML

<Window x:Class="RadCarousel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <telerik:RadCarousel x:Name="myRadCarousel" HorizontalScrollBarVisibility="Hidden" >
            <telerik:RadCarousel.ReflectionSettings>
                <telerik:ReflectionSettings Visibility="Visible"/>
            </telerik:RadCarousel.ReflectionSettings>

            <telerik:RadCarousel.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:RadCarouselPanel AutoLoadItems="False" />
                </ItemsPanelTemplate>
            </telerik:RadCarousel.ItemsPanel>
        </telerik:RadCarousel>
    </Grid>
</Window>

[Tom]

Hi,

We upgraded from Q2 2010 SP2 release to Q3 2011 release and get the same behaviour as the others have reported.
I have also played around with the project in RadCarousel.zip, and whatever I do, it's allways item 3 that is selected. Doesn't seem like BringDataItemIntoView is working at all when called triggerd by the Loaded event.

Regards,
Tom

[Maya]

Hello all,

I checked the sample I previously attached and it is totally my mistake - you need to handle Loaded event of the containing RadCarouselPanel, not directly RadCarousel. So, it should be:

private void myRadCarousel_Loaded(object sender, RoutedEventArgs e)
        {
            this.myRadCarousel.FindCarouselPanel().Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            (sender as RadCarouselPanel).MoveBy(1);
        }

The same is applicable for calling BringDataItemIntoView(dataItem).
Please accept my apology for the misunderstanding.
 

All the best,
Maya
the Telerik team

[N Mackay]

Maya,

We can't accept this as a solution, it's just a workaround to a bug in the control.

A callback the Loaded event is not a good solution (this only works if the window just using the carousel which won't be the case most of the time) and coding this in VB.NET is clunky as you have to use AddHandler, we don't to add callbacks unnecessarily to work around control limitations.

I stress again this version of the control introduced the behaviour we're experiencing and it's clearly a bug as it worked before.

I have to raise a support ticket as this is a breaking change.

Regards,
Norman.

[Tom]

Hi Maya,

Your suggestion is fine as a workarond for my case. But I agree with Norman that this is a bug in the control's behaviour, since it worked in previous versions.


Regards,
Tom

[N Mackay]

Hi Maya,

I had to raise a ticket (494986) for this issue as this is not an acceptable workaround.

It's worth noting that this issue exists in Q3 2011_3_1116 and Q3 2011_3_1220.

Regards,

Norman.

[Tony]

I agree. This is an obvious bug in the control and not expected behavior as we're being told. Many companies have policies against adding to their codebase to workaround defects in third party controls. Until this is corrected in the RadCarousel, we'll be exploring other options for controls on that particular screen of our application.

Norman, thanks for opening a ticket. Hopefully this gets resolved soon.

[Jog Rad]

Hi,

I have the same issues with this one. My scenario is..

1. I have a window that has a view.
2. In this view, there I display my carousel Items
3. I'm using an mvvm pattern for the Loaded event

XAML CODE:
<telerik:RadCarousel x:Name="thumbnailCarousel"  ItemsSource="{Binding Path=FilePageList}" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Loaded">
                    <mynamespace:LoadCommandBinding Command="{Binding LoadCarouselCommand}"
                        CommandParameter="{Binding RelativeSource={RelativeSource Self}, Path=InvokeParameter}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
...
</telerik:RadCarousel> 

ViewModel CODE:
private RelayCommand loadCarouselCommand;
public ICommand LoadCarouselCommand
        {
            get
            {
                if (loadCarouselCommand == null)
                {
                    Action<object> loadAction = new Action<object>(OnCarouselLoaded);
                    loadCarouselCommand = new RelayCommand(loadAction);
                }
                return loadCarouselCommand;
            }
        }

private void OnCarouselLoaded(object param)
        {
            if (param is RoutedEventArgs)
            {
                RoutedEventArgs re = param as RoutedEventArgs;


                RadCarousel fileCarousel = re.OriginalSource as RadCarousel;
                if (fileCarousel == null)
                    return;


                fileCarousel.FindCarouselPanel().Loaded += new RoutedEventHandler(FileCarouselPanel_Loaded);
            }
        }

private void FileCarouselPanel_Loaded(object sender, RoutedEventArgs e)
        {
            (sender as RadCarouselPanel).MoveBy(3);
        }

4. I used a dispatcher to get the items to bind to the item source

The problem now is that it displayed the carousel items for a few milliseconds then disappears from view afterwards..

[Maya]

Hi all,

Indeed, this behavior used to be the one illustrated in the beginning of the thread. However, since we introduced Continuous-functionality of RadCarousel in Q3 2011 release, it has slightly changed (that is why not it is needed to handle Loaded event of RadCarouselPanel).
Nevertheless, we will investigate the case and try to provide a valuable solution so that your requirements are met as well. 
Thank you for your understanding.
 

Regards,
Maya
the Telerik team

[N Mackay]

Hi Maya,

Are we any further forward to finding a solution for this ?

Our application no longer works as expected and a new release can't be shipped while this issue exists as the workaround is not acceptable.

Thanks,
Norman.

[Maya]

Hello,

The fix will be available most probably in our next internal build. 
 

Regards,
Maya
the Telerik team

[N Mackay]

Hi Maya,

Can you add this to the PITS system so we can track which release the fix will be in.

Thanks,
Norman.

[Maya]

Hello,

The issue has been added into our Public Issue Tracking System and you can follow its progress here.
 

Regards,
Maya
the Telerik team

[N Mackay]

Hi Maya,

Is there any update on this?

Thanks,
Norman.

[Maya]

Hi Norman,

The issue has been resolved in our latest internal build. I am sending you a sample project with those binaries so that you can test the functionality right away.
Please let us know in case you have any other problems with it.

Regards,
Maya
the Telerik team

[N Mackay]

Hi Maya,

Thanks for your response.

I can confirm the carousel behaves as previously now. Also using Autoload and IsContinuous seems to work as expected.

Will this fix be in the next official release? just so I can close the ticket.

Thanks for your assistance,
Norman.

[Maya]

Hello Norman,

Generally, all the fixes we introduce in our internal builds are included in our major releases as well.

Regards,
Maya
the Telerik team

[N Mackay]

Maya,

I close the ticket.

Thanks for your assistance in resolving this issue,

Norman.

[Jog Rad]

Are the binaries already available for download?

[Maya]

Hi Jog,

The binaries are already available and can be found in our Latest Internal Build.

Regards,
Maya
the Telerik team

[Jog Rad]

Hi,

Where can I see the latest internal build (2012/01/09)?
There is none in the download portal.

[Maya]

Hello Jog,

Generally, Latest Internal Builds are available either if you have a valid trial or a purchase. As it turns out, your trial has expired, no purchases are present under your account and unfortunately, you do not have access to the latest builds. 

Kind regards,
Maya
the Telerik team

[Jog Rad]

Hi Maya,

Yeah, my account is just a trial version but our server admin has the purchased one (licensed). We downloaded the latest there is in the download portal which is dated 2011/12/20. No 2012/01/09 (latest internal build) version is available. Please advise.

Best regards,
Jog

[Hristo]

Hi Jog,

I have checked your company account and it turns out that there are not any associated licenses with it either. Please contact your license holder and ask him to add you as a licensed developer. In this way you will get access to our latest internal builds.

All the best,
Hristo
the Telerik team

[Jog Rad]

Hi,

When is the major build that this fix is included? The company that I am working currently have the 2011_3_1220.

Best Regards,
Jog

[Maya]

Hi Jog,

The fix will be available in our next official release Q1 2012 that is to be release in the middle of February.  

All the best,
Maya
the Telerik team

[Jog Rad]

Hi Maya,

Thanks

Best Regards,
Jog

[Nolan Barnes]

Hi Maya,

thanks for the advice to look into his thread.
The problem still exists. I am currently working with Q1 2012 and I have still the same problem.
The workaround is not an option, when the radcarousel is part of a lookless customcontrol. 
I thought of another workaround:
The radcarousel must know its itemsperpage dynamically binded to an  itemsource count. Unfortunately I ran into another problem with this idea: it will also change the style and measures of the carouselpanels.
To be honest, I am not a great fan of workaraounds!
So what is the real solution??

[Maya]

Hello Nolan,

I tested the project attached in this thread with our current official release (Q1 2012 SP1) and everything works as expected.  You can try it on and check that the required item is scrolled into view once Loaded event of RadCarousel is fired. Furthermore, if you remove the whole handler, all items will be displayed as well (this, however, depends on the number of items per page and the number of the items in the source).
Could you clarify what is the behavior that you get ? 

Greetings,
Maya
the Telerik team

[kilhoffer]

I'm using the Q1 2013 release and still see the same behavior after a few years of waiting for this to be fixed. The PITS report says it was fixed, but I'm not seeing it. Was this something that was part of a hotfix and didn't make it into a release build?

[Maya]

Hi Anthony,

The issue I resolved before was that some methods were invoked before RadCarouselPanel is loaded (the one mentioned above in this thread).  Do you refer to this bug as it fixed wih the internal builds then and it is available in our official releases ?

All the best,
Maya
the Telerik team

[kilhoffer]

I'm referring to the first post in this thread, which I posted in 2011. I see the exact same behavior in the control, where if I bind to an observable collection of items, when the carousel is displayed, all items are scrolled out of view.

[N Mackay]

I couldn't get this working either when I started porting our proof of concept over to a New Prism MVVM shell.

I use this code when you add or remove something from the ObervableCollection

<telerik:RadCarousel x:Name="_carousel_quickview"
                                           ItemsSource="{Binding OpenModules}"
                                           ItemTemplate="{StaticResource CarouselItemTemplate}"
                                           BorderThickness="1"
                                           Padding="1"
                                           Margin="0,0,1,0"
                                           BorderBrush="LightGray"
                                           MaxHeight="116" Height="Auto"
                                           VerticalAlignment="Stretch"
                                           HorizontalScrollBarVisibility="Hidden"
                                           VerticalScrollBarVisibility="Hidden"
                                           PreviewMouseWheel="_carousel_quickview_PreviewMouseWheel"
                                           PreviewKeyDown="_carousel_quickview_PreviewKeyDown" >

               <telerik:RadCarousel.ItemsPanel>
                   <ItemsPanelTemplate>
                       <telerik:RadCarouselPanel ItemsMovementAnimationDuration="0:0:0"
                                                         ItemsPerPage="7"
                                                         PathPadding="-140"
                                                         IsOpacityEnabled="False"
                                                         AutoLoadItems="True"
                                                         Path="{StaticResource carousel_horizontalPath}" >

                           <!--This allows all carousel items to be the same size-->
                           <telerik:RadCarouselPanel.ScaleStops>
                               <telerik:PathStopCollection>
                                   <telerik:PathStop PathFraction="5.4" Value="1.0"/>
                               </telerik:PathStopCollection>
                           </telerik:RadCarouselPanel.ScaleStops>

                       </telerik:RadCarouselPanel>
                   </ItemsPanelTemplate>
               </telerik:RadCarousel.ItemsPanel>

               <i:Interaction.Triggers>
                   <i:EventTrigger EventName="SelectionChanging">
                       <commands:EventToCommand Command="{Binding ActivateModule}" PassEventArgsToCommand="True"  />
                   </i:EventTrigger>
               </i:Interaction.Triggers>
           </telerik:RadCarousel>

private void CarouselCentre()
        {
            if (_carousel != null)
            {
                RadCarouselPanel Panel = _carousel.FindCarouselPanel();
                if (Panel != null) { Panel.BringDataItemIntoView(_openModules[_openModules.Count / 2]); }
            }
        }

Adding an item

try
            {
                // Remove the control if it exists
                var moduleSearch = from ModPreview in _openModules where ModPreview.ModuleName == module.ModuleName select ModPreview;

                if (moduleSearch.Count() > 0)
                {
                    _openModules[_openModules.IndexOf(moduleSearch.FirstOrDefault())] = module;
                    RaisePropertyChanged("OpenModules");
                }
                else
                {
                    _openModules.Add(module);
                    CarouselCentre();
                }

            }

Despite specifying AutoLoadItems it never does anything, you had to use the mousewheel over the carousel to bring A single item into view, it must have worked at some stage as I tested a build but that was back in 2011, this works and I was bugging Maya (who's been very helpful) about other UX stuff so didn't bother reporting it.

Also requires me to keep a reference to the carousel in the viewmodel as I couldn't seem to find a way of detecting the control was initialized using an MVVM approach.  This viewmodel is based on MVVM Light btw.

[kilhoffer]

@N MacKay: I just used your workaround and it works as I would expect the carousel to work. Thanks for the solution. I wish we didnt have to put workarounds like this in our code to get it to behave as most would expect.

[Maya]

Hello all,

The thing is that this behavior has never been considered as a bug, but like default behavior - a consequence of the ItemsPerPage/ Items to be loaded values. And so far, the approach by calling one of the methods mentioned above was acceptable. However, you do have quite a valid point - this behavior may not be quite convenient and expected in some cases. I will investigate the case and see whether this can be changed without introducing breaking changes or any undesirable effects. 

Regards,
Maya
Telerik

[N Mackay]

If anyone uses that CarouselCenter code there was a possibility of a divide by zero which this fixes.

private void CarouselCenter()
        {
            if (_carousel != null & _openModules.Count() > 0)
            {
                RadCarouselPanel Panel = _carousel.FindCarouselPanel();
                if (Panel != null) { Panel.BringDataItemIntoView(_openModules[_openModules.Count / 2]); }
            }
        }

[Melissa]

Thank you. This is still an issue in 2016 Q2 and this solution still works.

[Joe]

It is 2023 and this is still an issue.