RadCarousel Key and Scroll

[Ralph Boester]

On the RadCarousel how do i programatically set the item centered in the RadCarousel as the selected item?

I am having an issue where you key over to the next item and then try to click on the previous item that is still selected.  The item does not move via mouse click because it is already selected.


Thanks

[Milan]

Hello Chris Caplinger,

I have created an extension method that lets you easily get access to the record or the container that is on top. Once you get that record you just need to set its IsSelected property to true.
I am sending you an application that demonstrates how this can be done.

Kind regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[capsule]

Hello,

I'm trying to programatically bring topmost and select an item contained within the carousel. I have a custom object that is similar to the messages object provided in the example attached. After setting the itemsource property, the items are visible and present in the carousel, but I cannot get the carosel to set the selected item, nor can I bring an item to the topmost position.

I have tried applying the soultion attached previously with no success.  The items within the panel have a count of zero, therefore, nothing happens within the extension.  Perhaps this example is outdated? 

Any assistance in setting the selected item and bringing the selected item topmost would be appreciated.

Thanks in advance,

Craig

[Milan]

Hi capsule,

Well, the sample is indeed a bit outdated. If you are using our latest release you will notice that there is a property called TopContainer on RadCarouselPanel which renders the extensions methods obsolete.

If you are using our latest release (Q2 2009 SP1) you can bring a data item into view the following way:

void Window1_Loaded(object sender, RoutedEventArgs e)
{
    this.RadCarousel1.BringDataItemIntoView(myDataItem);
}

If you are using a previous release it is a bit different:

void Window1_Loaded(object sender, RoutedEventArgs e)
{
    var record =  this.RadCarousel1.FindRecord(myDataItem);
    this.RadCarousel1.FindCarouselPanel().BringDataItemIntoView(record);
}

Hope this helps.

Sincerely yours,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[capsule]

Thank you for your reply, Milan.

I have tried as you suggested without any success. 

Please see my attached snippets, as they contain my carousel's xaml definition and a close representation of the object I'm using in my code.  I can upload a project if you need me to...


Carousel xaml:

<telerik:RadCarousel  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                                          Name="rcTestingProcess"
                                          Height="300"
                                          Width="300"
                                          VerticalAlignment="Top"
                                          HorizontalAlignment="Center">
            <telerik:RadCarousel.Resources>
                <Style TargetType="{x:Type telerik:CarouselItem}">
                    <Setter Property="Height"
                                        Value="100" />
                    <Setter Property="Width"
                                        Value="100" />
                </Style>
                <Style TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
                    <Setter Property="VerticalAlignment"
                                        Value="Top" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
                                <Grid IsHitTestVisible="True"
                                                  HorizontalAlignment="Left"
                                                  VerticalAlignment="Top">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="60" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Rectangle Grid.Row="0"
                                                           Grid.Column="0"
                                                           RadiusX="3"
                                                           RadiusY="3"
                                                           Height="50"
                                                           Width="50"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Center"
                                                           Margin="10,10,0,0">
                                        <Rectangle.Fill>
                                            <ImageBrush x:Name="brush"
                                                                    ImageSource="{Binding Path=Data.Image}" />
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </telerik:RadCarousel.Resources>
        </telerik:RadCarousel>

Object I'm binding to:

public class TestProcessSteps : System.Collections.ObjectModel.ObservableCollection<TestProcessStep> { }

public struct TestProcessStep {
        public string Caption {
            get;
            set;
        }
        public string Description {
            get;
            set;
        }
        public int Step {
            get;
            set;
        }
        private System.Windows.Media.Imaging.BitmapImage _processImage;
        public System.Windows.Media.Imaging.BitmapImage Image {
            get { return _processImage; }
            set { _processImage = value; }
        }
    }

I then populate my collection with multiple items and use that as my ItemSource for the carousel.  As I mentioned before, the carousel shows all of my items and their images fine, only it won't scroll to the first item, nor will it make it selected.


These were my attempts (obviously not all at once):

//As Suggested (Most Recent Version)
rcTestingProcess.BringDataItemIntoView( rcTestingProcess.Items[0] );


//Suggested (old version)
object record = this.rcTestingProcess.FindRecord( rcTestingProcess.Items[0] );
this.rcTestingProcess.FindCarouselPanel().BringDataItemIntoView( record );


//What I'm actually doing in my project
foreach( TestProcessStep step in rcTestingProcess.Items ) {
    if( step.Step == 1 ) {
        rcTestingProcess.SelectedItem = step;
        rcTestingProcess.BringDataItemIntoView( step );
        rcTestingProcess.SetIsSelected( step, true );
        break;
    }
}

I hope it’s something simple that I’ve overlooked, but I can’t seem to figure it out...

I am using version 2009.2.813.35

Thanks for your time!

Craig

[Milan]

Hi capsule,

It seems that the problem manifests only when your data items are of type struct - this has to do with how we compare data items internally. If you could change TestProcessStep from being struct to being class the problem should be resolved. 

This type of problem should not occur in our next release (Q3 2009).
Hope this helps.

Sincerely yours,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[capsule]

Thank you again for your reply, Milan.

I have since changed the struct to a class and as you indicated, it does indeed select the correct items.  Thank you.

I did have another issue, however, and I was wondering if it was along the same lines.  Bringing the desired item into view works great, but showing it as selected does not.

To be clear, I do think it's actually "selecting" the item, but the visual que does not display (the highlighted color).  I believe this to be the case because if I click on the current item, it appears to do nothing; because it will not highlight.  However, if I select another item, and then return to the previous one, the "selected color" highlight will show. 

It would seem only after programatically setting the selected item does this issue occur.
 
After bringing DataitemIntoView, I try setting the selected item...

rcTestingProcess.BringDataItemIntoView( step );
rcTestingProcess.SelectedItem = step;
rcTestingProcess.SetIsSelected( rcTestingProcess.SelectedItem, true );

I don't think it's an issue with the aforementioned class, because the bring into view method works, but I could be overlooking something else?

Thanks again in advance,

Craig

[Milan]

Hi capsule,

You are correct the BringDataItemIntoView method will only move the corresponding item into the center of the carousel - the method will not mark this item as selected. Similarly to what you did in the sample code, you should set the SelectedItem to mark an item as selected. Unfortunately for some reason the visual que does not change although the item is selected.

I will investigate the problem and update you once I have resolved the problem. Thank you for reporting this issue. I have updated your Telerik points.

Kind regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Milan]

Hello capsule,

We have fixed the problem and the fix will be available this Friday with our Latest Internal Build. Once again thank you for your feedback!

Kind regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[capsule]

Thanks to you and the team for your time and your responses!

Craig