how to Sync two GridViewScrollViewer

[Dario Concilio]

Hi to all,

I would to "sync" two GridView, my goal is allow the user to compare two lists, when he moves by scrollbar, both lists are moved in the same way.

Does anyone have any idea?

[Dario Concilio]

I found old post, but it refers to old version. If I try to use this code with actually version, how can I modify this one?

private void Grid_Loaded(object sender, RoutedEventArgs e)
        {
            var verticalScrollBar1 = (ScrollBar) this.Griglia1RadGridView.GetChildByName("PART_VerticalScrollBar");
            var horizontalScrollBar1 = (ScrollBar) this.Griglia1RadGridView.GetChildByName("PART_HorizontalScrollBar");
            var verticalScrollBar2 = (ScrollBar) this.Griglia2RadGridView.GetChildByName("PART_VerticalScrollBar");
            var horizontalScrollBar2 = (ScrollBar) this.Griglia2RadGridView.GetChildByName("PART_HorizontalScrollBar");

            verticalScrollBar1.ValueChanged += new RoutedPropertyChangedEventHandler<double>(verticalScrollBar1_ValueChanged);
            horizontalScrollBar1.ValueChanged += new RoutedPropertyChangedEventHandler<double>(horizontalScrollBar1_ValueChanged);
            verticalScrollBar2.ValueChanged += new RoutedPropertyChangedEventHandler<double>(verticalScrollBar2_ValueChanged);
            horizontalScrollBar2.ValueChanged += new RoutedPropertyChangedEventHandler<double>(horizontalScrollBar2_ValueChanged);
        }

        void horizontalScrollBar1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            this.Griglia2RadGridView.ScrollViewer SetHorizontalOffset(e.NewValue);
        }

        void verticalScrollBar1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            this.Griglia2RadGridView.ItemsControl.VirtualizingPanel.SetVerticalOffset(e.NewValue);
        }

        void horizontalScrollBar2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            this.Griglia1RadGridView.ItemsControl.VirtualizingPanel.SetHorizontalOffset(e.NewValue);
        }

        void verticalScrollBar2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            this.Griglia1RadGridView.ItemsControl.VirtualizingPanel.SetVerticalOffset(e.NewValue);
        }

[Stefan Nenchev]

Hello Dario,

I have attached a sample project for you that shows how to achieve the desired behavior. 

Regards,
Stefan Nenchev
Telerik by Progress

[Dario Concilio]

I tryed your solution and works, but I I add you code in my project, ScrollChanged not fire.

ScrollViewer firstGridBar;
        ScrollViewer secondGridBar;

        private void Griglia1RadGridView_Loaded(object sender, RoutedEventArgs e)
        {
            firstGridBar = (sender as RadGridView).ChildrenOfType<ScrollViewer>().FirstOrDefault();
            firstGridBar.ScrollChanged += FirstGridBar_ScrollChanged;
        }

        private void Griglia2RadGridView_Loaded(object sender, RoutedEventArgs e)
        {
            secondGridBar = (sender as RadGridView).ChildrenOfType<ScrollViewer>().FirstOrDefault();
            secondGridBar.ScrollChanged += SecondGridBar_ScrollChanged;
        }

        private void FirstGridBar_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            secondGridBar.ScrollToVerticalOffset(e.VerticalOffset);
            secondGridBar.ScrollToHorizontalOffset(e.HorizontalOffset);
        }

        private void SecondGridBar_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            firstGridBar.ScrollToVerticalOffset(e.VerticalOffset);
            firstGridBar.ScrollToHorizontalOffset(e.HorizontalOffset);
        }

[Dario Concilio]

I'm using Office2013 Theme

[Dario Concilio]

Ehm, I'm using Framework 4.0

[Stefan Nenchev]

Hi Dario,

I tested the behavior with .NET framework 4.0 and the Office2013 theme and it is working fine at my end. I have attached a sample for your reference. Would it be possible to raise a ticket with a sample project that shows the undesired behavior so I can have a more detailed look?

Regards,
Stefan Nenchev
Telerik by Progress

[Dario Concilio]

Thank you, I found the reason, I'm using ShowSearchPanel="True" that disable firing (or I don't konw.....) ScrollChange event.

This one is know, how can use this "link" between two grdiview and use SearchPanel?

[Stefan Nenchev]

Hi Dario,

When you enable the SearchPanel, an additional ScrollViewer appears. With this in mind, when subscribing to the ScrollChanged event of the ScrollViewer, you need to make sure that the correct element is targeted. You can apply the following change:

private void clubsGrid_Loaded(object sender, RoutedEventArgs e)
        {
            firstGridBar = (sender as RadGridView).ChildrenOfType<ScrollViewer>().Where(x => x.Name == "PART_ItemsScrollViewer").FirstOrDefault();
            firstGridBar.ScrollChanged += FirstGridBar_ScrollChanged;
        }

        private void clubsGrid2_Loaded(object sender, RoutedEventArgs e)
        {
            secondGridBar = (sender as RadGridView).ChildrenOfType<ScrollViewer>().Where(x => x.Name == "PART_ItemsScrollViewer").LastOrDefault();
            secondGridBar.ScrollChanged += SecondGridBar_ScrollChanged;
        }

Regards,
Stefan Nenchev
Telerik by Progress

[Dario Concilio]

Perfect! Thank you Stefan!