RadListPicker selected item in Popup is at top instead of middle

7 posts, 0 answers
  1. Kanishk
    Kanishk avatar
    11 posts
    Member since:
    Apr 2012

    Posted 29 May 2012 Link to this post

    Hi,

    When RadListPicker gets opened in Popup the selected item is scrolled at the top (when list has enough items such that the layout is more than screen height). Due to this, items beofre the selected item are not shown and it appears as if the selected item is the start of the list. It would be better if the selected items gets scrolled into view somewhere in middle of the screen instead of the top. The current experience is confusing from usablity perspective.
  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 31 May 2012 Link to this post

    Hello Kanishk,

    Thank you very much for the feedback. I can confirm that putting the selected item at the top is a bit confusing. That's why with our official Q2 2012 release this behavior will be changed. The new behavior will not try to scroll the selected item to the top, but instead remember the old scroll position and restore it. This is what I have in mind. Imagine you have just a RadListPicker on the page with 50 items in it.

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <telerik:RadListPicker x:Name="listPicker1" VerticalAlignment="Center"/>
    </Grid>

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.listPicker1.ItemsSource = Enumerable.Range(0, 50);
    }

    Let's assume we select #30. 



    After we close the popup and reopen it again, the selected item will be at the same position in the popup, whereas, with the old behavior, the selected item will be scrolled to the top.

    Old  New 

    Let me know if this is the expected behavior you had in mind.

    Regards,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Kanishk
    Kanishk avatar
    11 posts
    Member since:
    Apr 2012

    Posted 31 May 2012 Link to this post

    Yes, however do also check the behaviour when the selected index is set from the code behind, before the popup gets opened for the first time. In my opinion the selected item should be somewhere in between in that case too.
  5. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 04 Jun 2012 Link to this post

    Hello Kanishk,

    Thank you for the clarification. With our official Q2 2012 release, RadListPicker will be using a RadDataBoundListBox for its popup mode. That's why we will expose a BringIntoView(object) method which will allow you to bring into view any item, as long as RadListPicker is in popup mode.

    Basically, if you want to bring an item into view when the RadListPicker's popup open, you will have to do the following:

    private void listPicker1_StateChanged(object sender, Telerik.Windows.Controls.ListPickerStateChangedEventArgs e)
    {
        if (this.listPicker1.State == Telerik.Windows.Controls.ListPickerState.Expanded)
        {
            this.listPicker1.BringIntoView(this.listPicker1.SelectedItem);
        }
    }

    Let me know what you think about this approach. I'd be glad to continue the discussion further.

    Kind regards,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Kanishk
    Kanishk avatar
    11 posts
    Member since:
    Apr 2012

    Posted 05 Jun 2012 Link to this post

    BringIntoView would provide more flexiblity. Thanks!
  7. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 05 Jun 2012 Link to this post

    Hi Kanishk,

    Unfortunately we will not be able to provide a more customizable BringIntoView method for our official Q2 2012 release. However, I've added this request in our back log and as soon as we prioritize it, we will start working on it. 
     

    Kind regards,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  8. Vijay
    Vijay avatar
    29 posts
    Member since:
    Nov 2011

    Posted 05 Jun 2012 Link to this post

    Hello Kanishk,

       Yes, you are absolutely right! The Items are adjusted on top line position for the selected Item index in list picker. However, this would confuse a bit from the usability point of perspective. But look into the same with latest upgraded version release. This works really great now. Please try to refer the below sample code for a better idea towards this concept.

    XAML Code

    <telerikInput:RadListPicker Height="107" HorizontalAlignment="Left" Margin="6,162,0,0" VerticalAlignment="Top" Width="450"
    Name="listPicker1" FontFamily="Verdana" FontSize="22" Header="List Picker Options: ">
                    <telerikInput:RadListPicker.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Border BorderBrush="OrangeRed" BorderThickness="3">
                                    <TextBlock Text="{Binding Operation}" FontFamily="Verdana" FontStyle="Italic" Foreground="DeepSkyBlue"></TextBlock>
                                </Border>
                            </StackPanel>
                        </DataTemplate>
                    </telerikInput:RadListPicker.ItemTemplate>
                </telerikInput:RadListPicker>


    MainPage.cs Code

    public void btnAdd_Click(object sender, RoutedEventArgs e)
           {
               List<Arthmetic> arthmeticCollection = new List<Arthmetic>();
               if (string.IsNullOrEmpty(textBox1.Text) || string.IsNullOrEmpty(textBox2.Text))
               {
                   RadMessageBox.Show("Please Enter Some Values", MessageBoxButtons.OKCancel,
                       "RadListPicker - WCF Service", null, false, false,
                       System.Windows.HorizontalAlignment.Stretch, System.Windows.VerticalAlignment.Center, null);
               }
               else
               {
                   for (int i = 0; i <= 10; i++)
                   {
                       Arthmetic objArthmetic = new Arthmetic();
                       objArthmetic.Operation = "Addition " + i.ToString(); objArthmetic.Number1 = Convert.ToDouble(textBox1.Text);
                       objArthmetic.Number2 = Convert.ToDouble(textBox2.Text); arthmeticCollection.Add(objArthmetic);
                       objClient.addCompleted += new EventHandler<addCompletedEventArgs>(add_Call);
                       objClient.addAsync(objArthmetic.Number1, objArthmetic.Number2);
                   }
                   textBox1.Text = ""; textBox2.Text = "";
               }
               listPicker1.ItemsSource = arthmeticCollection;
               listPicker1.PopupOpenAnimation = new RadFadeAnimation
               {
                   AutoReverse = false, Duration = TimeSpan.FromSeconds(5), StartOpacity = 0.2, EndOpacity = 1 };
               listPicker1.PopupCloseAnimation = new RadFadeAnimation
               {
                   AutoReverse = false, Duration = TimeSpan.FromSeconds(5), StartOpacity = 1, EndOpacity = 0.2 };
           }


    I hope this was useful. 

    Thanks and Regards,
    Vijay
    MVC Corp
Back to Top
DevCraft banner