Linking scrollbars between two RadGrids

[Philip]

Hello,

I imagine this is a very difficult question, but I was curious if perhaps the people here had some insights on how one might best handle this problem.

Here is the issue: I have two rad grids holding data that is correlated with each other, but different enough that they necessitate two grids. The desired functionality for these grids is that the scrolling level between the two grids should be linked, ie, that if one grid is scrolled down, the other is scrolled down the same amount.

Is this implementation doable? I'm not aware of of any events that fire upon scrolling, or any properties that alter a pages scroll level. I know about the bringintoview method, but as the change needs to occur on scrolling and not selection, I am unsure if it will help me or not.

Thanks to everyone for their time,
Philip Coffey

[Vlad]

Hi Philip,

You can get vertical scrollbar using our extension methods and perform desired actions on Scroll event. Please check "Get visible rows count on scroll or size change" from my blog post.

Sincerely yours,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Missing User]

Hi Philip,

This is just a follow-up to my colleague's response - I'm attaching a sample application that you can use as a reference.

Sincerely yours,
Anastasia
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Philip]

That works perfectly! Thank you very much.

With that done, is there an way to make on of the scrollbars invisible--in other words, make both pages be controlled by a single scrollbar?

Thanks again,

Philip Coffey

[Milan]

Hi Philip,

This is possible you just have to make the following modifications to your project:

Create new style for the GridViewScrollViewer class in your UserControl resources:

<UserControl.Resources>
    <ControlTemplate x:Key="InvisibleScrollBars" TargetType="grid:GridViewScrollViewer">
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
              Background="{TemplateBinding Background}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="0" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="0" />
            </Grid.RowDefinitions>

            <ContentPresenter Grid.Column="0" Grid.Row="0" />
            <ScrollBar x:Name="PART_VerticalScrollBar"
                       Orientation="Vertical" Margin="{TemplateBinding VerticalScrollBarMargin}"
                       Grid.Column="1" Grid.Row="0" />
            <ScrollBar x:Name="PART_HorizontalScrollBar"
                       Orientation="Horizontal" Grid.Column="0" Grid.Row="1"  />
        </Grid>
    </ControlTemplate>
</UserControl.Resources>

Replace the old logic of ItemsControl2_Loaded with this one:

void ItemsControl2_Loaded(object sender, RoutedEventArgs e)
{
     var viewer = (GridViewScrollViewer)this.RadGridView2.GetChildByName("PART_ItemsScrollViewer");
     viewer.Template = (ControlTemplate)this.Resources["InvisibleScrollBars"];
}

Finally replace the horizontalScrollBar1_ValueChanged and verticalScrollBar1_ValueChanged with:

void horizontalScrollBar1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    var maxOffset = this.RadGridView2.ItemsControl.VirtualizingPanel.ExtentWidth -
        this.RadGridView2.ItemsControl.VirtualizingPanel.ViewportWidth;

    if (e.NewValue >= maxOffset)
        this.RadGridView2.ItemsControl.VirtualizingPanel.SetHorizontalOffset(maxOffset);
    else
        this.RadGridView2.ItemsControl.VirtualizingPanel.SetHorizontalOffset(e.NewValue);
}

void verticalScrollBar1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    var maxOffset = this.RadGridView2.ItemsControl.VirtualizingPanel.ExtentHeight -
        this.RadGridView2.ItemsControl.VirtualizingPanel.ViewportHeight;

    if (e.NewValue >= maxOffset)
        this.RadGridView2.ItemsControl.VirtualizingPanel.SetVerticalOffset(maxOffset);
    else
        this.RadGridView2.ItemsControl.VirtualizingPanel.SetVerticalOffset(e.NewValue);
}

After you implement all changes the right-hand side grid should have not scrollbars but you should still be able to controls its offset by using the first grid.

Hope this helps.

Kind regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Tamir Kaneh]

Hello

I need to apply this solution to  silverlight 4 Q1 2010 GridView.
But there is no ItemsControl property any more.

Please advice

[Tamir Kaneh]

Can any body help ?

[Maya]

Hello Tamir Kaneh,

The property ItemsControl has been marked as obsolete and it has been removed. However, now you may use  the extension method ChildrenOfType<>. You can use as a reference this blog post.
I hope that helps

Sincerely yours,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.