[Solved] RadListPicker selected item in Popup is at top instead of middle

[Kanishk]

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.

[Kiril Stanoev]

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

[Kanishk]

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.

[Kiril Stanoev]

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

[Kanishk]

BringIntoView would provide more flexiblity. Thanks!

[Kiril Stanoev]

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

[Vijay]

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