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

RadGridView scroll position issue when hierarchical grid all expanded

5 Answers 482 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Kun
Top achievements
Rank 2
Kun asked on 29 Oct 2019, 05:03 PM

Hello,

I have the same issue like this post:

https://www.telerik.com/forums/rad-grid-view-position-after-reload-of-the-data

 

The TableElement.VScrollBar.Value is saved/restored well in the gridview. But the vScroll.Maximum is changed dynamically depending upon the 

In order to reproduce the issue, I've modified the telerik's approach, please download the demo in the link:

https://www.dropbox.com/s/gyypdzzvjvmck08/gridscollrefresh.rar?dl=0

In the demo, the gridview is refreshing every second by a backgroundworker and a timer. When all hierarchcal grid are collapsed, the scroll position is saved/restored well because vScroll.Maximum stays the same.

But If you click the button "Expand all", and then scroll, the scrolling bar or the gridview will jump a little bit, because the vScroll.Maximum is changing. That means the VScrollBar.Value/vScroll.Maximum ratio is changing when I restore the old VScrollBar.Value.

 

Regards,

5 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 31 Oct 2019, 09:50 AM

 

Hello, Kun,         

As it was explained in the referred forum thread, when you reload a hierarchical grid, it is not enough to store the vertical scrollbar's value. It is necessary to store which rows are expanded as well. I have noticed that this logic is implemented in the provided sample project.

When you expand all rows, scroll to a certain row and press RadButton1, the expanded rows and the vertical scrollbar value are restored. But there is a slight flickering of the grid because all rows are iterated and the expanded state is adjusted. Each time you set the expanded state of a row, the grid is refreshed. In order to optimize the performance use BeginUpdate/EndUpdate block for restoring the expanded state: 
            this.radGridView1.BeginUpdate();
            foreach (GridViewDataRowInfo rowToRestore in radGridView1.Rows)
            {
                RestoreExpandedStates(rowToRestore);
            }
            this.radGridView1.EndUpdate();

As to the timer, note that you may be scrolling when the timer ticks. Indeed, the maximum of the scrollbar is updated.  This is observed when hierarchy is displayed. While you are just scrolling the grid, the maximum of the vertical scrollbar is constantly slightly updated because the height of the last hierarchy row is being adjusted. The below screenshots illustrates better what I am trying to explain. This is expected to affect the vertical scrollbar.

That is why there is no appropriate solution that I can suggest in this case. This is a specificity of vertical scrolling mechanism in hierarchical grid.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kun
Top achievements
Rank 2
answered on 31 Oct 2019, 03:48 PM

Hello Dess,

Thank you for your detailed explication.

Not to mention the timer, I agree with you that the expanded state and the vertical scrollbar are being adjusted during the gridview updates.

But, there is one thing that I don't understand. The gridiew doesn't flick between several updates without scrolling.The gridiew flicks if I scroll then update the gridview only for the first time.

What's the difference between these 2 cases ?

1. load the gridview (all expanded) -> update -> update -> update .....: the gridview is always stable

2. load the gridview (all expanded) -> scroll -> (I can wait long enough to make sure the gridview doesn't move) -> update -> the gridview flicks ->update ->the gridview is stable.: the grid flicks only at first update after the scrolling.

It is the same content and the same data that I've updated for the 2 updates. Why the grid flicks only at the first time?

And also, if I scrolls upwards then updates, the displayed view won't change but the scrolling bar will flick.(it's acceptable for me.)

If I scrolls downwards then updates, the displayed view and the scrolling bar will both flick.

In my opinion, some value maybe isn't saved well at the end of the scrolling. After the first update, some value is lost, it causes the movement.

 

Thank you by advance.

Kun

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 01 Nov 2019, 09:44 AM

Hello, Kun,         

As I tried to explain in my previous reply, scrolling the grid affects the Maximum value of the vertical scroll-bar because the height of the last hierarchy element changes during scrolling. The previously provided screenshots illustrates better which height I mean. That is why you notice the flickering after the first update following the scrolling. You can handle the TableElement.VScrollBar.PropertyChanged event and check how many times the "Maximum" PropertyName is changed.

If you just update the grid without scrolling, the Maximum is not adjusted and setting the vertical scrollbar's value will return to the correct position without flickering because the stored value takes the same ration of the whole scroll range. But if you scroll and the Maximum is updated, the stored vertical scroll-bar's Value will have another ratio of the whole scroll-bar's range. Since we can't prevent adjusting the scroll-bar while scrolling, we can't restore to absolutely the same position.

I hope that this information provides a more clear explanation of what happens in the grid.  

If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kun
Top achievements
Rank 2
answered on 04 Nov 2019, 04:09 PM

Hello Dess,

Thank you for your detailed response.

I've found the scrolling works weirdly even without refresh. Please watch 2 short videos at the following link:

1. The scrolling bar changes its size.

https://www.dropbox.com/s/rer50d7k9wc8ugg/scrollingbar_size.mp4?dl=0

In the video, the scrolling bar had 1 cm's longer at the beginning. It becomes longer and longer by going up if I keep pressing the UP button. In the another way, it will reduce its size if I keep pressing the DOWN button. But its size won't change much if I move it by mouse.

 

2. The gridview or the scrolling bar will flicker sometimes once I release the mouse.

https://www.dropbox.com/s/omu2l5ucrw7hase/gridview_flicker.mp4?dl=0

In the video, I did 4 mouse releasing:

  •     1st time, upwards: the gridview and the scrolling bar don't flicker much.
  •     2nd & 3rd time, downwards: the scrolling bar flickers a little bit.
  •     last time (14th seconds - 16th seconds in the video), downwards: the scrolling bar flickers a little bit, but the grid flickers about 2 cm.

 

FYI, the demo runs without the refresh timer.

 

Thank you for your aide by advance.

 

Best regards,

Kun

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 05 Nov 2019, 09:10 AM

Hello, Kun, 

The provided sample videos are greatly appreciated. Indeed, the vertical scroll-bar can be resized without rebinding the grid but just while scrolling up and down with the scroll-bar's arrows. 

As it was previously explained in one of my previous replies, while you are just scrolling the grid, the maximum of the vertical scrollbar is constantly being updated because the height of the last hierarchy row is adjusted. I hope that the below screenshots illustrates better what I am trying to explain. This is expected to affect the vertical scrollbar's range and it can't be avoided.


Even if you subscribe to the TableElement.VScrollBar.PropertyChanged event you will notice that the event is fired for the Maximum property when scrolling.

As to the flicker, this is obtained because, while you are moving the thumb, you are actually scrolling, and when the mouse is released  the scroll-bar's range is being updated due to the above mentioned process that is going. That is why you obtain the so called flickering.

I hope that the provided explanation makes more clear why you are getting this behavior.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
Kun
Top achievements
Rank 2
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Kun
Top achievements
Rank 2
Share this question
or