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

Positiioning on a row when RadGridView is inside of a ScrollViewer

4 Answers 154 Views
GridView
This is a migrated thread and some comments may be shown as answers.
BRiddle
Top achievements
Rank 1
BRiddle asked on 27 Sep 2011, 06:13 PM
An app I'm working on needs several mutually-exclusive User Controls; each of which has a child RadGridView.   To make the User Control's child controls scroll properly horizontally, I had to wrap all of each User Control's child controls in a ScrollViewer.   (I tried various horizontal scroll settings on each grid itself, but never found one that worked well and also consistently stretched the grid to match the parent UserControl's width dimension).

Before adding the ScrollViewer containers, I had already implemented "Find/FindNext" logic which positioned the resulting row within the appropriate RadGridView's viewport by calculating the desired new top row for the RadGridView, using the Grid's ScrollIntoViewAsync() method to get the right row visible on top, and setting the Grid's CurrentItem and Selecteditem properties to that row item.

But with the enclosing ScrollViewer, the GridView thinks more rows are visible than really are.  So the selected rows remain outside of the ScrollViewer's viewport.

 I realize this is a virtualization issue, but am not sure of the best way to address it.   (The GridView may contain thousands of rows.   I'd rather not have them all load at once as I'd expect if I tried to disable virtualization for the grid as a whole).

Since the ScrollViewer is needed only to accommodate horizontal width, there may be a way to limit the outer ScrollViewer's behavior to the horizontal dimension.

Does anyone have ideas about the best way to address this?
Thanks!
-Bob

4 Answers, 1 is accepted

Sort by
0
Vlad
Telerik team
answered on 28 Sep 2011, 06:38 AM
Hello Bob,

 Nesting UI virtual components like RadGridView, DataGrid, ListBox, etc. inside ScrollViewer can cause serious performance problems. ScrollViewer, StackPanel, Grid Row with Height="Auto", etc will measure child controls with infinity height and virtual controls will attempt to create all item containers at once. Please specify Height/MaxHeight to avoid such problems. 

Best wishes,
Vlad
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
BRiddle
Top achievements
Rank 1
answered on 29 Sep 2011, 04:00 PM
Hi,

I appreciate the response.  Yes, I know that containing the RadGridView in a ScrollViewer is less than ideal.   But I was unable to come up with a combination of property settings that would both stretch the Grid as the parent Window/UserControl were enlarged and also automatically show the GridView's horizontal scrollbar when the parent Window's width was reduced to size smaller than the whole GridView.

The GridViews are each inside of a corresponding UserControl.    Here is an example of the UserControl layout:

<UserControl x:Class="XXXX.WorkflowBaseControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:local="clr-namespace:LPSWorkflowDeploymentUtility"
             xmlns:models="clr-namespace:LPSWorkflowDeploymentUtility.Models"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="600"  xmlns:my="clr-namespace:LPSWorkflowDeploymentUtility.Models" Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <models:PrimaryDeploymentViewModel x:Key="primaryViewModel"/>
    </UserControl.Resources>
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="LwduMetadataDetailsTemplate">
                <local:LwduMetadataDetailsTemplate />
            </DataTemplate>
            <DataTemplate x:Key="LwduWorkflowDefinitionDetailsTemplate">
                <local:LwduWorkflowDefinitionDetailsTemplate />
            </DataTemplate>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <DockPanel Grid.Row="0" Grid.Column="0"  Name="dckpnlWorkflowBaseControl" DataContext="{Binding}">
            <telerik:RadGridView DockPanel.Dock="Top" MinHeight="300" Height="Auto"  HorizontalAlignment="Left"
                 ItemsSource="{Binding Path=SrcWorkflowDefinitionOC}"
                 RowDetailsVisibilityMode="Collapsed" RowDetailsTemplate="{StaticResource LwduWorkflowDefinitionDetailsTemplate}"
                 IsSynchronizedWithCurrentItem="True"
                 telerik:StyleManager.Theme="Office_Blue"
                 Margin="8" Name="tblWorkflowDefinitionDataGrid" VerticalAlignment="Top"  
                 IsReadOnly="True"
                 AutoGenerateColumns="False"
                 ShowGroupPanel="False" RowDetailsVisibilityChanged="tblWorkflowDefinitionDataGrid_RowDetailsVisibilityChanged" SelectionMode="Extended">
                <telerik:RadContextMenu.ContextMenu>
                    <telerik:RadContextMenu Opened="WorkflowBaseControl_ContextMenu_Opened">
                        <telerik:RadMenuItem Header="Copy to Clipboard"
                                             Command="local:LwduFormMain.RoutedCommandCopyWorkflowToClipboard"  />
                    </telerik:RadContextMenu>
                </telerik:RadContextMenu.ContextMenu>
                <telerik:RadGridView.Columns>
                    <telerik:GridViewToggleRowDetailsColumn x:Name="WorkflowDefinitionDetailsToggleColumn" ExpandMode="Multiple"/>
                    <telerik:GridViewDataColumn x:Name="displayNameColumn" DataMemberBinding="{Binding Path=DisplayName}" Header="Display Name" Width="Auto" />
                    ...
                    ...
                    <telerik:GridViewDataColumn x:Name="descriptionColumn" DataMemberBinding="{Binding Path=Description}" Header="Description" Width="Auto" />
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
        </DockPanel>
    </Grid>
</UserControl>



Here is an example Window which mounts the UserControls.

<Window x:Class="XXXX.LwduFormDestinationDataView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStartupLocation="CenterScreen"
        xmlns:localModels="clr-namespace:LPSWorkflowDeploymentUtility.Models"
        xmlns:localControllers="clr-namespace:LPSWorkflowDeploymentUtility.Controllers"
        xmlns:local="clr-namespace:LPSWorkflowDeploymentUtility" Icon="/LPSWorkflowDeploymentUtility;component/Images/LPS_RGB_solid_TempScaled.bmp"
        Title="Destination Data View" Height="600" MinWidth="600"  Width="Auto" Closing="Window_Closing">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="5*" MinHeight="400"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>        
        <DockPanel Grid.Row="0" HorizontalAlignment="Stretch">
                <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
                    <local:WorkflowBaseControl x:Name="workflowBaseControl" Visibility="Collapsed" DockPanel.Dock="Top" MinHeight="300" Height="Auto"  Width="Auto"  HorizontalAlignment="Left" />
                    <local:AssembliesBaseControl x:Name="assembliesBaseControl" Visibility="Collapsed" DockPanel.Dock="Top" MinHeight="300" Height="Auto"  Width="Auto"  HorizontalAlignment="Left" />
                    <local:MetadataBaseControl x:Name="metadataBaseControl" Visibility="Collapsed" DockPanel.Dock="Top" MinHeight="300" Height="Auto"  Width="Auto"  HorizontalAlignment="Left" />
                </StackPanel>
        </DockPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="5"  Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,10"  HorizontalAlignment="Center" Width="Auto">
            <Button Content="OK" Height="23" HorizontalAlignment="Center"  Name="btnOk" VerticalAlignment="Center" Width="75"  Margin="5,0,5,0" IsDefault="True" Click="btnOk_Click" />
        </StackPanel>        
    </Grid>
</Window>
0
Vlad
Telerik team
answered on 04 Oct 2011, 07:12 AM
Hi,

 You have ColumnDefinition with Width set to Auto - this will measure everything with infinity width. You need Width="*".

You can find an example attached.

Kind regards,
Vlad
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
BRiddle
Top achievements
Rank 1
answered on 05 Oct 2011, 05:34 PM
Hi Vlad,

Thank you very much for the reply.  That solved my problem regarding horizontal scrolling.   As a relative newbie to WPF, I'm finding out all too often about how I've misunderstood various nuances of XAML layout.

Again, I appreciate your help!
-Bob
Tags
GridView
Asked by
BRiddle
Top achievements
Rank 1
Answers by
Vlad
Telerik team
BRiddle
Top achievements
Rank 1
Share this question
or