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

Setting scrollable area for hierarchical gridview

7 Answers 90 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 24 Oct 2011, 08:05 PM
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.

7 Answers, 1 is accepted

Sort by
0
Pavel Pavlov
Telerik team
answered on 25 Oct 2011, 09:21 AM
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 >>

0
Steve
Top achievements
Rank 1
answered on 25 Oct 2011, 12:29 PM
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>

 

0
Pavel Pavlov
Telerik team
answered on 28 Oct 2011, 01:25 PM
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 >>

0
Steve
Top achievements
Rank 1
answered on 28 Oct 2011, 04:40 PM
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. 
 
0
Steve
Top achievements
Rank 1
answered on 14 Nov 2011, 05:10 PM
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
0
Vanya Pavlova
Telerik team
answered on 15 Nov 2011, 11:22 AM
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 >>

0
Steve
Top achievements
Rank 1
answered on 15 Nov 2011, 02:31 PM
That did it.  Thank you so much for your help.  Now we have 1 scroll bar with child grids expanding to content.  Perfect!

Steve

Tags
GridView
Asked by
Steve
Top achievements
Rank 1
Answers by
Pavel Pavlov
Telerik team
Steve
Top achievements
Rank 1
Vanya Pavlova
Telerik team
Share this question
or