RadCarousel Key and Scroll

10 posts, 0 answers
  1. Ralph Boester
    Ralph Boester avatar
    2 posts
    Member since:
    Jan 2008

    Posted 16 Feb 2009 Link to this post

    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
  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 19 Feb 2009 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. capsule
    capsule avatar
    13 posts
    Member since:
    Sep 2009

    Posted 21 Oct 2009 Link to this post

    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
  5. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 23 Oct 2009 Link to this post

    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.
  6. capsule
    capsule avatar
    13 posts
    Member since:
    Sep 2009

    Posted 26 Oct 2009 Link to this post

    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


  7. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 28 Oct 2009 Link to this post

    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.
  8. capsule
    capsule avatar
    13 posts
    Member since:
    Sep 2009

    Posted 29 Oct 2009 Link to this post

    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


  9. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 04 Nov 2009 Link to this post

    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.
  10. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 10 Nov 2009 Link to this post

    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.
  11. capsule
    capsule avatar
    13 posts
    Member since:
    Sep 2009

    Posted 18 Nov 2009 Link to this post

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

    Craig
Back to Top
UI for WPF is Visual Studio 2017 Ready