How to scroll RadGridView to display specified entity at the top of RadGridView

[T. Tanaka]

Hi,

I have a problem with scrolling RadGridView.
I call RadGridView.ScrollIntoView to display the specified entity after Rebind called.
It works, but the entity is displayed at the bottom of RadGridView.
I want RadGridView to display the specified entity at the top of RadGridView.

Is there any way to do it?

Best Regards,
Liu

[Pavel Pavlov]

Hi Mitsuru Kudou,

RadGridView does not provide the requested functionality out-of the box. Although it would bring the item into view, it will not guarantee the exact place of the item . It would guarantee it is just in the viewport.
Actually if the item is "above" the viewport , after scroll into view it will be at the top.

So you can use a small hack - scroll to the last item and then scroll the desired item in to view.

This of course would result in some screen flickering . 

Another alternative is to get hold of the ScrollViewer inside RadGridView and knowing the default height of the rows , scroll to certain vertical position( in pixels) .
Something as :

var scroller = this.RadGridView1.ChildrenOfType<GridViewScrollViewer>().First();

scroller.ScrollToVerticalOffset(X);
where X is a calculated value of yours in pixels.

The above stated hack is as close as we can get. Hope it helps.

Kind regards,
Pavel Pavlov
the Telerik team

[Muhammad Ummar]

Nice idea, it worked for me.

[Murugesh]

Hi,

To position selected item on top of the grid via grid scroll, I used below technique.
It works for me without considering row height (In my case all the rows in grid, will be the same equal height always).

In Xaml:

<telerik:RadGridView x:Name="TimeSelection" ItemsSource="{Binding TimeInputList, Mode=TwoWay}" SelectedItem ="{Binding SelectedItem}" >

<i:Interaction.Behaviors>
<i_local:EventToCommandBehavior Command="{Binding Path=SelectionChangedCommand}" Event="SelectionChanged" PassArguments="true" />
</i:Interaction.Behaviors>

<telerik:RadGridView.Columns>
                                                -------
                                                -------
</telerik:RadGridView.Columns>

</telerik:RadGridView>

In ViewModel file:

private ICommand selectionChangedCommand;
       public ICommand SelectionChangedCommand
       {
            get { return selectionChangedCommand; }
            set { selectionChangedCommand = value; OnPropertyChanged(); }
       }

       SelectionChangedCommand = CreateCommand<SelectionChangeEventArgs>(SelectionChanged);

       public void SelectionChanged(SelectionChangeEventArgs e)
        {
            if (e != null)
            {
                var dataGrid = e.OriginalSource as RadGridView;
                if (dataGrid != null && SelectedItem != null)
                {
                    dataGrid.SelectedItem = SelectedItem;
                    var itemsScrollViewer = dataGrid.ChildrenOfType<GridViewScrollViewer>().FirstOrDefault();
                    itemsScrollViewer.CanContentScroll = false;   // To make device independent offset calculation.
                    itemsScrollViewer.ScrollToVerticalOffset(dataGrid.Items.Count * dataGrid.Items.IndexOf(dataGrid.SelectedItem));                   
                }
            }
        }


Regards,
Parvathi.

[Martin Ivanov]

Hi Parvathi,

Thank you for sharing your solution.

Regards,
Martin Ivanov
Progress Telerik

[Murugesh]

Hi Martin,

In my above example, there is small difference between radgridview row height and row count values, So above solution worked for me.
Intentionally I added many rows into gridview and tested, that time itemsScrollViewer.ScrollToVerticalOffset(dataGrid.Items.Count * dataGrid.Items.IndexOf(dataGrid.SelectedItem)) logic was not working properly.
After that based on above difference value (row count - row height) I found out below offset calculation value, and it is working with any number rows in grid view.

if (dataGrid.RowHeight > dataGrid.Items.Count)
{
     itemsScrollViewer.ScrollToVerticalOffset(((dataGrid.RowHeight / itemsScrollViewer.ViewportHeight) + dataGrid.RowHeight) * dataGrid.Items.IndexOf(dataGrid.SelectedItem));
}
else
{
     itemsScrollViewer.ScrollToVerticalOffset(((0.2 * dataGrid.RowHeight) + dataGrid.RowHeight) * dataGrid.Items.IndexOf(dataGrid.SelectedItem));
}

Can any of you explain, how this offset calculation works ?


Best Regards,
Parvathi.

[Martin Ivanov]

Hello Murugesh,

Here is the calculation break down.

int selectedItemIndex = dataGrid.Items.IndexOf(dataGrid.SelectedItem)

if (dataGrid.RowHeight > dataGrid.Items.Count)
{
    var rowHeightOffset = (dataGrid.RowHeight / itemsScrollViewer.ViewportHeight);
    // The value calculated here is the row height * selected item index. For example, if the calcualted height is 30 and the selected item index is 20, the vertical scroll offset will be 30x20=600px.
    double verticalOffset = (rowHeightOffset + dataGrid.RowHeight) * selectedItemIndex;

    itemsScrollViewer.ScrollToVerticalOffset(verticalOffset);
}
else
{
    var rowHeightOffset = 0.2 * dataGrid.RowHeight;
    double verticalOffset = (rowHeightOffset + dataGrid.RowHeight) * selectedItemIndex;
    itemsScrollViewer.ScrollToVerticalOffset(verticalOffset);
}

Additionally, I would recommend you to check the ScrollIntoView() method of RadGridView which supports the desired effect out of the box.

Regards,
Martin Ivanov
Progress Telerik