Setting scrollable area for hierarchical gridview

8 posts, 0 answers
  1. Steve
    Steve avatar
    9 posts
    Member since:
    Jul 2010

    Posted 24 Oct 2011 Link to this post

    I have a gridview with multiple nested hierarchical grids that I am loading programatically via the Dataloading event and GridViewTableDefinition relations. All works well except scrolling.  The scollable area for my top level grid never exceeds ~300-400px. 

    I've tried :
            Turning off scrolling in the Scrollviewer and use Scrollview container
            Turning off Row and Column virtualization
            Trapping Sizechanged events on all chilld grids and setting height in event handler.

    Basically I just need to be able enlarge the scrollable area of the hierarchical grid.  Any help would greatly be appreciated.
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 25 Oct 2011 Link to this post

    Hi Steve,

    Can you please paste me the XAML for your Top level grid . Generally the scrollable area would depend on the
    height of the RadGridView. Please paste the whole XAML ( including the containers of RadGridView) . This should help in identifying what may be limiting it .
    A screenshot of the erroneous appearance would be also helpful.

    Best wishes,
    Pavel Pavlov
    the Telerik team

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

  3. Steve
    Steve avatar
    9 posts
    Member since:
    Jul 2010

    Posted 25 Oct 2011 Link to this post

    Thanks. As per your reply here is the XAML you requested and attached is the screen shot of the scrolling behavior. Thanks again.

     

     

     

    <Grid x:Name="LayoutRoot" Background="White">

     

     

     

     

    <Grid.RowDefinitions>

     

     

     

     

    <RowDefinition Height="34"/>

     

     

     

     

    <RowDefinition Height="*"/>

     

     

     

     

    <RowDefinition Height="Auto"/>

     

     

     

     

    </Grid.RowDefinitions>

     

     

     

     

    <Grid.Resources>

     

     

     

     

    <Style x:Key="HistoryCellStyle" TargetType="telerik2:GridViewCell">

     

     

     

     

    <Setter Property="Background" Value="Gray" />

     

     

     

     

    </Style>

     

     

     

     

    <Style x:Key="ForecastReadOnlyCellStyle" TargetType="telerik2:GridViewCell">

     

     

     

     

    <Setter Property="Background" Value="LightBlue" />

     

     

     

     

    </Style>

     

     

     

     

    <Style x:Key="ForecastEditableCellStyle" TargetType="telerik2:GridViewCell">

     

     

     

     

    <Setter Property="Background" Value="LightGreen" />

     

     

     

     

    </Style>

     

     

     

     

    <Style x:Key="HiddenButtonStyle" TargetType="telerik2:RadButton">

     

     

     

     

    <Setter Property="IsEnabled" Value="False" />

     

     

     

     

    </Style>

     

     

     

     

    <Style x:Key="VisibleButtonStyle" TargetType="telerik2:RadButton">

     

     

     

     

    <Setter Property="IsEnabled" Value="True" />

     

     

     

     

    </Style>

     

     

     

     

    <Style x:Key="ForecastChangedCellStyle" TargetType="telerik2:GridViewCell">

     

     

     

     

    <Setter Property="Background" Value="LightPink" />

     

     

     

     

    </Style>

     

     

     

     

    <Style x:Key="ForecastRulesApplyCellStyle" TargetType="telerik2:GridViewCell">

     

     

     

     

    <Setter Property="Background" Value="Magenta" />

     

     

     

     

    </Style>

     

     

     

     

    <Style x:Key="ForecastHiddenCellStyle" TargetType="telerik2:GridViewCell">

     

     

     

     

    <Setter Property="Visibility" Value="Collapsed" />

     

     

     

     

    </Style>

     

     

     

     

    </Grid.Resources>

     

     

     

     

    <StackPanel Orientation="Horizontal" Grid.Row="0">

     

     

     

     

    <telerik2:RadMenu Name="mnuForecast">

     

     

     

     

    <telerik2:RadMenuItem Header="Forecast Processing" x:Name="mnuForecastProcessing">

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGetFromWeb" Header="Get My Data (Requires Network)" Click="mnuGetFromWeb_Click" />

     

     

     

     

    <telerik2:RadMenuItem Header="-" IsEnabled="False" IsTextSearchEnabled="False" IsSeparator="True" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuSyncChanges" Header="Review/Sync Changes (Requires Network)" Click="mnuSyncChanges_Click" />

     

     

     

     

    </telerik2:RadMenuItem>

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupBy" Header="Grouping By Division">

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupByDivsion" Header="By Division" Click="mnuGroupBy_Click" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupByRegion" Header="By Region" Click="mnuGroupBy_Click" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupByBroker" Header="By Broker" Click="mnuGroupBy_Click" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupByOperation" Header="By Operation" Click="mnuGroupBy_Click" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupByYourTop80" Header="By Your Top 80 %" Click="mnuGroupBy_Click" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupByDivTop80" Header="By Your Top 80 % of Division" Click="mnuGroupBy_Click" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupByYourTopPct" Header="By Your Top %" Click="mnuGroupBy_Click" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuGroupByDivTopPct" Header="By Your Top % of Division" Click="mnuGroupBy_Click" />

     

     

     

     

    </telerik2:RadMenuItem>

     

     

     

     

    <telerik2:RadMenuItem Header="Options">

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuTogglePaging" Header="Enable Paging" Click="mnuTogglePaging_Click" IsCheckable="True" />

     

     

     

     

    <telerik2:RadMenuItem Header="-" IsEnabled="False" IsTextSearchEnabled="False" IsSeparator="True" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuExpandAll" Header="Expand All Groups" Click="mnuExpandAll_Click" IsEnabled="False" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuCollapseAll" Header="Collapse All Groups" Click="mnuCollapseAll_Click" IsEnabled="False" />

     

     

     

     

    <telerik2:RadMenuItem Header="-" IsEnabled="False" IsTextSearchEnabled="False" IsSeparator="True" />

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuSaveView" Header="Save this View" Click="mnuSaveView_Click" IsEnabled="False" />

     

     

     

     

    </telerik2:RadMenuItem>

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuAbout" Header="About" >

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuForecastInfo" Header="Info" Click="mnuForecastInfo_Click" >

     

     

     

     

    </telerik2:RadMenuItem>

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuCheckForUpdates" Header="Check for Updates" Click="mnuForecastUpdateCheck_Click" >

     

     

     

     

    </telerik2:RadMenuItem>

     

     

     

     

    </telerik2:RadMenuItem>

     

     

     

     

    <telerik2:RadMenuItem x:Name="mnuExitApp" Header="Exit" Click="mnuExitApp_Click" ></telerik2:RadMenuItem>

     

     

     

     

    </telerik2:RadMenu>

     

     

     

     

    <Button Content="Add New Record " Height="19" Name="butAddNew" Width="100" Click="butAddNew_Click" Margin="10,0" />

     

     

     

     

    <ComboBox x:Name="cbForecast" Height="23" SelectionChanged="cbForecast_SelectionChanged" >

     

     

     

     

    </ComboBox>

     

     

     

     

    <TextBox Height="23" Name="txtLastUpdate" Margin="5,0,5,0" IsReadOnly="True" />

     

     

     

     

    </StackPanel>

     

     

     

     

     

    <telerik:RadGridView Name="grdForecast"

     

     

     

    Grid.Column="0" Grid.Row="1"

     

     

     

    ColumnWidth="*" RowIndicatorVisibility="Collapsed"

     

     

     

    DataLoadMode="Synchronous"

     

     

     

    EnableRowVirtualization="False" EnableColumnVirtualization="False"

     

     

     

    RowLoaded="grdForecast_RowLoaded"

     

     

     

    DataLoading="grdForecast_DataLoading">

     

     

     

     

    </telerik:RadGridView>

     

     

     

     

     

    </Grid>

     

  4. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 28 Oct 2011 Link to this post

    Hi Steve,

    Everything seems OK in your code. The only thing that may be limiting the height of the root Gridview may be the star-sized row definition of the layoutroot grid panel.

    This can be easily checked - can you please try replacing :
    <RowDefinition Height="*"/>

    with

    <RowDefinition Height="800"/> for example.

    If this does not solve the problem , let me know.

    Best wishes,
    Pavel Pavlov
    the Telerik team

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

  5. Steve
    Steve avatar
    9 posts
    Member since:
    Jul 2010

    Posted 28 Oct 2011 Link to this post

    Hi Pavel, well it doesn't seem to matter what the Row height is in XAML.  Basically the entire grid's height changes (white area) but the child area (grey scrollable area) remains the same when rows are expanded. I tried to change the height on the GridViewVirtualizingPanel and parent RadGridView when a row expands but that had no effect. 
     
  6. Steve
    Steve avatar
    9 posts
    Member since:
    Jul 2010

    Posted 14 Nov 2011 Link to this post

    Hi Pavel, 
        Just wondering if there are any options I can use or a different method to utilize to mimimize the scroll areas in my grid.  We are finding the excessive scrolling behavior counter-productive in my sales app.  We in some instances may go 3 levels deep before a detail row is visible for editing. 

    I guess one option is to possibly use bread-crumbing with dynamic grid binding as a replacement for the grid hieararchy.  I just hope I didn't need to invest more time to replicate this behavior.

    Again any help here would be great.  Thanks.

    Steve
  7. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 15 Nov 2011 Link to this post

    Hello Steve,

     

    Predefining the templates either of VirtualizingStackPanel or to RadGridView would not help on that matter. We have recently made performance improvements and by that reason the logic behind ChildDataControlsPresenter was changed. Instead the standard GridViewDataControl now you have a RadGridView with MaxHeight set to 300 pixels, please refer to the attached picture.
    You may remove this MaxHeight and the scrollable area will be streched.
    Will you please add the following implicit style to your project and let me know what happens:


    <UserControl.Resources>
            <telerik:Office_BlackTheme x:Key="Theme"/>
            <ControlTemplate x:Key="ChildDataControlsPresenterTemplate" TargetType="telerik:ChildDataControlsPresenter">
                <ItemsControl x:Name="PART_ChildDataItemsControl" IsTabStop="{TemplateBinding IsTabStop}" ItemsSource="{Binding}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <telerik:RadGridView IsTabStop="{Binding IsTabStop, ElementName=PART_ChildDataItemsControl}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ControlTemplate>
            <Style TargetType="telerik:ChildDataControlsPresenter">
                <Setter Property="Template" Value="{StaticResource ChildDataControlsPresenterTemplate}"/>
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
            <telerik:RadGridView  ItemsSource="{Binding Collection}">
                //................................
                </telerik:RadGridView>
         
        </Grid>


    All the best,
    Vanya Pavlova
    the Telerik team

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

  8. Steve
    Steve avatar
    9 posts
    Member since:
    Jul 2010

    Posted 15 Nov 2011 Link to this post

    That did it.  Thank you so much for your help.  Now we have 1 scroll bar with child grids expanding to content.  Perfect!

    Steve

Back to Top