Divide the grid into multiple panes?

[Alan Kin]

Hi,

I would like to split the grid into multiple panes / views; is this possible?

Here's an example in Microsoft Excel:

Any help would be appreciated, thanks.

Alan

[Sampathnarayanan Sankaralingam]

Hi Alan,

We have checked your requirement. There is no support to split the grid into multiple panes. However can you please provide more details about your requirement. It will be more helpful for us to find the exact cause and to provide a prompt solution.

Regards,

Sampath Narayanan.S

[Alan Kin]

Hi Sampath,

Our requirements is to have a split view, where you have essentially 4 grids operating on the same data. We want a vertical scrollbar for the top 2 views and one for the bottom 2 views, and similarly horizontal scrollbars to scroll the 2 left and 2 right views separately.

Maybe a potential solution is to generate 4 separate gridcontrols?

Alan

[Mohanram Anbukkarasu]

Hi Alan, 

Yes you can achieve your requirement by adding four separate GridControls and ScrollViewer and handling the ScrollChanged event of the ScrollViewers to synchronize the scrolling with other adjacent ScrollViewer as shown below.  

Code example :  

 

Xaml :  

 

<Grid> 

    <Grid.RowDefinitions> 

        <RowDefinition Height="*"/> 

        <RowDefinition Height="*"/> 

    </Grid.RowDefinitions> 

    <Grid.ColumnDefinitions> 

        <ColumnDefinition Width="*"/> 

        <ColumnDefinition Width="*"/> 

    </Grid.ColumnDefinitions> 

    <Border BorderThickness="0,0,2,2" BorderBrush="Black" Grid.Row="0" Grid.Column="0" > 

        <ScrollViewer x:Name="scrollViewer1" CanContentScroll="True" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" > 

            <syncfusion:GridControl Name="gridControl1" /> 

        </ScrollViewer> 

    </Border> 

    <Border BorderThickness="0,0,0,2" BorderBrush="Black" Grid.Row="0" Grid.Column="1" > 

        <ScrollViewer x:Name="scrollViewer2" CanContentScroll="True" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" > 

            <syncfusion:GridControl Name="gridControl2" /> 

        </ScrollViewer> 

    </Border> 

    <Border BorderThickness="0,0,2,0" BorderBrush="Black" Grid.Row="1" Grid.Column="0" > 

        <ScrollViewer x:Name="scrollViewer3" CanContentScroll="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden"  > 

            <syncfusion:GridControl Name="gridControl3" /> 

        </ScrollViewer> 

    </Border> 

    <Border BorderThickness="0" BorderBrush="Black" Grid.Row="1" Grid.Column="1" > 

        <ScrollViewer x:Name="scrollViewer4" CanContentScroll="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" > 

            <syncfusion:GridControl Name="gridControl4" /> 

        </ScrollViewer> 

    </Border> 

</Grid> 

 

 

C# :  

 

scrollViewer2.ScrollChanged += OnScrollViewer_ScrollChanged; 

scrollViewer3.ScrollChanged += OnScrollViewer_ScrollChanged; 

scrollViewer4.ScrollChanged += OnScrollViewer_ScrollChanged; 

 

 

private void OnScrollViewer_ScrollChanged(object sender, System.Windows.Controls.ScrollChangedEventArgs e) 

{ 

    if (sender == scrollViewer2 && e.VerticalChange != 0) 

    { 

        scrollViewer1.ScrollToVerticalOffset(e.VerticalOffset); 

        scrollViewer1.ScrollToHorizontalOffset(e.HorizontalOffset); 

    } 

 

    if (sender == scrollViewer3 && e.HorizontalChange != 0) 

    { 

        scrollViewer1.ScrollToHorizontalOffset(e.HorizontalOffset); 

    } 

 

    if (sender == scrollViewer4) 

    { 

        if (e.VerticalChange != 0) 

        { 

            scrollViewer3.ScrollToVerticalOffset(e.VerticalOffset); 

        } 

        else if (e.HorizontalChange != 0) 

        { 

            scrollViewer2.ScrollToHorizontalOffset(e.HorizontalOffset); 

        } 

    } 

} 

We have prepared a sample to replicate this scenario.  

Sample link : https://www.syncfusion.com/downloads/support/forum/171877/ze/GridControl_Demo-202699392  

Please have a look at this sample and let us know if you require further assistance from us.  

Regards, 

Mohanram A. 

[Alan Kin]

Thank you for the sample.  I've added splitters so the sizes of the grids are adjustable and this will work for us.

Alan

[Mohanram Anbukkarasu]

Hi Alan, 

We are glad to know that the provided solution worked at your end. Please let us know if you require any other assistance from us.  

Regards,  

Mohanram A.