This is a migrated thread and some comments may be shown as answers.

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

6 Answers 256 Views
GridView
This is a migrated thread and some comments may be shown as answers.
T. Tanaka
Top achievements
Rank 1
T. Tanaka asked on 07 Aug 2012, 05:01 AM
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

6 Answers, 1 is accepted

Sort by
0
Accepted
Pavel Pavlov
Telerik team
answered on 08 Aug 2012, 01:18 PM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Muhammad Ummar
Top achievements
Rank 1
answered on 21 Dec 2012, 12:55 PM
Nice idea, it worked for me.
0
Murugesh
Top achievements
Rank 1
answered on 01 Jun 2017, 06:33 AM
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.
0
Martin Ivanov
Telerik team
answered on 05 Jun 2017, 08:07 AM
Hi Parvathi,

Thank you for sharing your solution.

Regards,
Martin Ivanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Murugesh
Top achievements
Rank 1
answered on 08 Jun 2017, 03:55 AM
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.
0
Martin Ivanov
Telerik team
answered on 12 Jun 2017, 09:31 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
GridView
Asked by
T. Tanaka
Top achievements
Rank 1
Answers by
Pavel Pavlov
Telerik team
Muhammad Ummar
Top achievements
Rank 1
Murugesh
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or