Styling Group Rows in RadGridView

[Ben]

Hi All, 

In Brief
I am having issues trying to style the GridViewGroupRow. These issues are probably due to virtualisation.

The Details
I am currently attempting to create an alternative style for displaying groups within a RadGridView. Basically, I want to:

• Expand the header used for the group (GridViewHeaderIndentCell) to be the same width as the column being grouped - (got this working).
• Set the Header property of this header cell (GridViewHeaderIndentCell) to the Header property of the column being grouped - (got this working).
• Restyle the GridViewGroupRow to remove the top row (all groups will be auto expanded, so the toggle button will be removed too) and to increase the side (indent) row to match the new width of the group header (the same as the column being grouped) - (mostly working).

See the attached image for a graphical representation of what I am trying to do (RadGridView_GroupStyle.jpg).

On the last point, I was trying to use a custom Attached Property to record the Width of the column on the GridViewGroupRow which could then be used via a TemplateBinding in the style for the GridViewGroupRow. However, it appears that GridViewGroupRows are only created for groups that are currently visible. This means that the attached property can only be applied to these groups (consequently, when I scroll down the list, my group headers have a Width of 0.

My current attempted solution involves creating an attached property to store the width of the column. This is then attached to each GridViewGroupRow in the event handler of the Grouped event for the grid. The style for the GridViewGroupRow then uses this attached property to set the width of the telerk:IndentPresenter control. This works fine, as long as all groups are visible in the grid when the Grouped event is fired. However, if there are many groups (or the grid is small) and not all groups can be seen, the groups which are not visible do not have their width set.

Here is the code from the event handler of the Grouped event:

private void RadGridView_Grouped(object sender, GridViewGroupedEventArgs e)
{
    RadGridView grid = sender as RadGridView;

    ColumnGroupDescriptor groupDescriptor = null;

    if (grid != null)
    {
        grid.UpdateLayout();

        List<GridViewHeaderIndentCell> indentCells = grid.ChildrenOfType<GridViewHeaderIndentCell>().ToList();

        // This is only returning groups that are currently visible??
        List<GridViewGroupRow> groupRows = grid.ChildrenOfType<GridViewGroupRow>().ToList();

        if (indentCells != null)
        {
            int totalGroupCols = grid.GroupDescriptors.Count;

            switch (e.Action)
            {
                // add grouping.
                case GroupingEventAction.Place:
                    double colWidth = 0.0;

                    if (totalGroupCols > 0 && totalGroupCols == indentCells.Count)
                    {
                        for (int i = 0; i < totalGroupCols; i++)
                        {
                            groupDescriptor = grid.GroupDescriptors[i] as ColumnGroupDescriptor;

                            if (groupDescriptor != null)
                            {
                                colWidth = groupDescriptor.Column.ActualWidth;
                                indentCells[i].Width = colWidth;
                                GroupingHelper.SetGroupColumnWidth(grid, colWidth);

                                if (groupDescriptor.Column.Header is UIElement)
                                {
                                    indentCells[i].Content = CloneElement(groupDescriptor.Column.Header as UIElement);
                                }
                                else
                                {
                                    indentCells[i].Content = groupDescriptor.Column.Header.ToString();
                                }

                                groupDescriptor.Column.IsVisible = false;
                            }
                        }

                        if (groupRows != null)
                        {
                            foreach (GridViewGroupRow row in groupRows)
                            {
                                GroupingHelper.SetGroupColumnWidth(row, colWidth);

                                if (row.HasItems)
                                {
                                    List<GridViewRow> subRows = row.ChildrenOfType<GridViewRow>().ToList();

                                    if (subRows != null)
                                    {
                                        foreach (GridViewRow subRow in subRows)
                                        {
                                            GroupingHelper.SetHideRowIndicator(subRow, true);
                                        }
                                    }
                                }

                                row.GroupViewModel.Column.Width = colWidth;
                            }
                        }
                    }
                    break;
                // remove grouping.
                case GroupingEventAction.Remove:

                    if (totalGroupCols > 0 && totalGroupCols == indentCells.Count)
                    {
                        for (int i = 0; i < totalGroupCols; i++)
                        {
                            groupDescriptor = grid.GroupDescriptors[i] as ColumnGroupDescriptor;

                            if (groupDescriptor != null)
                            {
                                indentCells[i].Width = groupDescriptor.Column.ActualWidth;
                                if (groupDescriptor.Column.Header is UIElement)
                                {
                                    indentCells[i].Content = CloneElement(groupDescriptor.Column.Header as UIElement);
                                }
                                else
                                {
                                    indentCells[i].Content = groupDescriptor.Column.Header.ToString();
                                }

                                groupDescriptor.Column.IsVisible = false;
                            }
                        }
                    }

                    groupDescriptor = e.GroupDescriptor as ColumnGroupDescriptor;
                    if (groupDescriptor.Column != null && !groupDescriptor.Column.IsVisible)
                    {
                        groupDescriptor.Column.IsVisible = true;
                    }
                    // optional.
                    break;
                // re-order grouping.
                case GroupingEventAction.Move:
                    // optional.
                    // TODO: Fix it up to allow re-order of columns.
                    break;
                case GroupingEventAction.Sort:
                    // optional.
                    // TODO: Fix it up so that sorting (by group) works.
                    break;
                default:
                    break;
            }
        }
    }

    this.lastGroupHeaderIndex = -1;
    grid.UpdateLayout();
}

The Styles used for this are:

<Style x:Key="{x:Type telerik:GridViewHeaderIndentCell}" TargetType="{x:Type telerik:GridViewHeaderIndentCell}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderIndentCell}">
                <Border
                    x:Name="OuterBorder"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Width="Auto"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}">
                    <Border x:Name="InnerBorder" BorderBrush="#FF83A5D2" BorderThickness="1">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFEBF3FF" Offset="0"/>
                                <GradientStop Color="#FFD0E8FF" Offset="1"/>
                                <GradientStop Color="#FFABC9EE" Offset="0.43"/>
                                <GradientStop Color="#FFC6DFFF" Offset="0.42"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left"
                            Content="{TemplateBinding Content}"/>
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="BorderThickness" Value="0,0,1,1"/>
    <Setter Property="BorderBrush" Value="#FF848484"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF5B5B5B" Offset="1"/>
                <GradientStop Color="#FF868686"/>
                <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
                <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>

<Style x:Key="{x:Type telerik:GridViewGroupRow}" TargetType="{x:Type telerik:GridViewGroupRow}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:GridViewGroupRow}">
                <Grid x:Name="PART_GroupExpanderGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Border
                        x:Name="PART_IndicatorPresenter"
                        VerticalAlignment="Stretch"
                        Width="16"
                        Visibility="{TemplateBinding RowIndicatorVisibility}"
                        Grid.Column="0"
                        BorderBrush="#FF83A5D2"
                        BorderThickness="0,0,1,1"
                        telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                        <Border
                            Background="#FFE2F0FD"
                            BorderBrush="White"
                            BorderThickness="1"/>
                    </Border>

                    <telerik:IndentPresenter
                        Background="{TemplateBinding Background}"
                        IsTabStop="False"
                        Grid.Column="1"
                        HorizontalAlignment="Left"
                        IndentLevel="{TemplateBinding Level}"
                        telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                        Width="{TemplateBinding loc:GroupingHelper.GroupColumnWidth}"
                        >
                        <!--"{TemplateBinding loc:GroupingHelper.GroupColumnWidth}"-->
                        <telerik:StyleManager.Theme>
                            <telerik:Office_BlueTheme/>
                        </telerik:StyleManager.Theme>
                        <ContentPresenter
                            VerticalAlignment="Center"
                            HorizontalAlignment="Left"
                            Content="{TemplateBinding GroupViewModel}"
                            ContentTemplate="{TemplateBinding GroupHeaderTemplate}"
                            />
                        <!--ContentTemplate="{TemplateBinding GroupHeaderTemplate}"-->
                    </telerik:IndentPresenter>

                    <Border
                        x:Name="Content"
                        Grid.Column="2"
                        BorderThickness="1,0,0,0"
                        BorderBrush="#FFCBCBCB">
                        <StackPanel>
                            <telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>
                            <telerik:GridViewGroupFooterRow x:Name="Footer" IsTabStop="False">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlueTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:GridViewGroupFooterRow>
                        </StackPanel>
                    </Border>

                    <Border
                        x:Name="BottomBorder"
                        VerticalAlignment="Bottom"
                        Visibility="Visible"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        BorderBrush="#FF83A5D2"
                        BorderThickness="0,0,0,1"
                        telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="GroupHeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <ContentPresenter Content="{Binding Header}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Width" Value="{Binding Column.Width}"/>
    <Setter Property="Background" Value="#FFE4E4E4"/>
    <Setter Property="BorderBrush" Value="#FFCBCBCB"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Padding" Value="10,0,0,0"/>
    <Setter Property="MinHeight" Value="25"/>
    <Setter Property="AllowDrop" Value="True"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>

<Style x:Key="{x:Type telerik:GridViewRow}" TargetType="{x:Type telerik:GridViewRow}">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:GridViewRow}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <telerik:SelectiveScrollingGrid x:Name="grid">
                        <telerik:SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </telerik:SelectiveScrollingGrid.ColumnDefinitions>
                        <telerik:SelectiveScrollingGrid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </telerik:SelectiveScrollingGrid.RowDefinitions>
                        <Border x:Name="SelectionBackground" Margin="{TemplateBinding Margin}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="2" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"/>
                        <Border x:Name="Background_Over" Margin="1,1,1,2" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="2" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                            <Border BorderBrush="White" BorderThickness="1">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFFFBA3" Offset="1"/>
                                        <GradientStop Color="#FFFFFBDA" Offset="0"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                        </Border>
                        <Border x:Name="Background_Selected" Margin="1,1,1,2" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="2" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                            <Border BorderBrush="White" BorderThickness="1">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFCE79F" Offset="1"/>
                                        <GradientStop Color="#FFFDD3A8"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                        </Border>
                        <Border x:Name="Background_Invalid" Margin="1,1,1,2" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="2" BorderBrush="#FFCE7D7D" BorderThickness="1" CornerRadius="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                            <Border BorderThickness="1">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFCDCDC"/>
                                        <GradientStop Color="#FFFCC1C1" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFEBF4FD"/>
                                        <GradientStop Color="#FFDBEAFD" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                            </Border>
                        </Border>
                        <telerik:GridViewToggleButton x:Name="PART_HierarchyExpandButton" Width="25" IsTabStop="{TemplateBinding IsTabStop}" IsHitTestVisible="{Binding IsExpandable, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <telerik:GridViewToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type telerik:GridViewToggleButton}">
                                    <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
                                        <Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="9" Height="9" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                            <Grid>
                                                <Path x:Name="plus" Fill="#FF3C6AA3" Stretch="Fill" Stroke="{x:Null}" Margin="{TemplateBinding Padding}" Width="5" Height="5" Data="M1.937,0L2.937,0 2.937,2.0209999 5,2.0209999 5,3.0209999 2.937,3.0209999 2.937,5 1.937,5 1.937,3.0209999 0,3.0209999 0,2.0209999 1.937,2.0209999z"/>
                                                <Rectangle x:Name="minus" Fill="#FF3C6AA3" Stroke="{x:Null}" RadiusX="0" RadiusY="0" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" Width="5" Height="1" Opacity="0"/>
                                            </Grid>
                                        </Border>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Opacity" TargetName="plus" Value="0"/>
                                            <Setter Property="Opacity" TargetName="minus" Value="1"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </telerik:GridViewToggleButton.Template>
                            <telerik:GridViewToggleButton.Opacity>
                                <Binding Path="IsExpandable" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <telerik:BooleanToOpacityConverter/>
                                    </Binding.Converter>
                                </Binding>
                            </telerik:GridViewToggleButton.Opacity>
                            <telerik:GridViewToggleButton.Visibility>
                                <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <telerik:BooleanToVisibilityConverter/>
                                    </Binding.Converter>
                                </Binding>
                            </telerik:GridViewToggleButton.Visibility>
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlueTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:GridViewToggleButton>
                        <Border Grid.Column="2" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <Border.Visibility>
                                <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <telerik:BooleanToVisibilityConverter/>
                                    </Binding.Converter>
                                </Binding>
                            </Border.Visibility>
                        </Border>
                        <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" IsTabStop="False" Grid.Column="3">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlueTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:DataCellsPresenter>
                        <Border x:Name="PART_RowBorder" VerticalAlignment="Bottom" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="4" BorderBrush="{TemplateBinding HorizontalGridLinesBrush}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                            <Border.BorderThickness>
                                <Binding Path="HorizontalGridLinesWidth" ConverterParameter="Bottom" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <telerik:GridLineWidthToThicknessConverter/>
                                    </Binding.Converter>
                                </Binding>
                            </Border.BorderThickness>
                        </Border>
                        <Border Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="2" Background="#FFA7C4E8" BorderBrush="#FF83A5D2" BorderThickness="0,1" Padding="6" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                            <Border.Visibility>
                                <Binding Path="IsExpanded" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <telerik:BooleanToVisibilityConverter/>
                                    </Binding.Converter>
                                </Binding>
                            </Border.Visibility>
                            <ContentPresenter
                                x:Name="PART_HierarchyChildPresenter"
                                Content="{TemplateBinding Content}"
                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True"/>
                        </Border>
                        <telerik:DetailsPresenter x:Name="PART_DetailsPresenter" IsTabStop="False" Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" DetailsProvider="{TemplateBinding DetailsProvider}">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlueTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:DetailsPresenter>
                        <telerik:IndentPresenter
                            Visibility="Collapsed"
                            x:Name="PART_IndentPresenter"
                            IsTabStop="False"
                            Grid.Column="1"
                            Grid.RowSpan="4"
                            IndentLevel="{TemplateBinding IndentLevel}"
                            telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlueTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:IndentPresenter>
                        <!--<Border x:Name="PART_IndicatorPresenter" VerticalAlignment="Stretch" Width="25" Visibility="{TemplateBinding RowIndicatorVisibility}" Grid.Column="0" Grid.RowSpan="3" BorderBrush="#FF83A5D2" BorderThickness="0,0,1,1" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <Border x:Name="NavigatorIndicatorBackground" Background="#FFE2F0FD" BorderBrush="White" BorderThickness="1">
                                <Grid>
                                    <Grid x:Name="NavigatorIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="11" Height="11" Visibility="Collapsed">
                                        <Path Fill="#FF80A3D0" Stretch="Fill" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="8" Height="8" Data="F1M32.0234,6.66669L24.2923,0.0248413 28.3697,0.0248413 32,3.14362 36.1492,6.70819 32,10.2728 28.4664,13.3085 24.2923,13.3085 32.0234,6.66669z"/>
                                    </Grid>
                                    <Grid x:Name="EditIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="10" Visibility="Collapsed">
                                        <Path Fill="#7F83A5D2" Stretch="Fill" Data="M14,9L15,9 15,10 14,10z M1,9L2,9 2,10 1,10z M15,8L16,8 16,9 15,9z M0,8L1,8 1,9 0,9z M15,1L16,1 16,2 15,2z M0,1L1,1 1,2 0,2z M14,0L15,0 15,1 14,1z M1,0L2,0 2,1 1,1z"/>
                                        <Path Fill="#FFB3D0F3" Stretch="Fill" Margin="1" Data="M0.99999994,6.9999995L2,6.9999995 3,6.9999995 4,6.9999995 5,6.9999995 6,6.9999995 7,6.9999995 8,6.9999995 9,6.9999995 10,6.9999995 11,6.9999995 12,6.9999995 13,6.9999995 13,7.9999995 12,7.9999995 11,7.9999995 10,7.9999995 9,7.9999995 8,7.9999995 7,7.9999995 6,7.9999995 5,7.9999995 4,7.9999995 3,7.9999995 2,7.9999995 0.99999994,7.9999995z M13,0.99999994L14,0.99999994 14,1.9999999 14,2.9999995 14,3.9999995 14,4.9999995 14,5.9999995 14,6.9999995 13,6.9999995 13,5.9999995 13,4.9999995 13,3.9999995 13,2.9999995 13,1.9999999z M0,0.99999994L0.99999994,0.99999994 0.99999994,1.9999999 0.99999994,2.9999995 0.99999994,3.9999995 0.99999994,4.9999995 0.99999994,5.9999995 0.99999994,6.9999995 0,6.9999995 0,5.9999995 0,4.9999995 0,3.9999995 0,2.9999995 0,1.9999999z M11,0L12,0 13,0 13,0.99999994 12,0.99999994 11,0.99999994 10,0.99999994 9,0.99999994 8,0.99999994 7,0.99999994 6,0.99999994 5,0.99999994 4,0.99999994 3,0.99999994 2,0.99999994 0.99999994,0.99999994 0.99999994,2.3841858E-07 2,2.3841858E-07 3,2.3841858E-07 4,2.3841858E-07 5,2.3841858E-07 6,2.3841858E-07 7,2.3841858E-07 8,2.3841858E-07 9,2.3841858E-07 10,2.3841858E-07z"/>
                                        <Path Fill="#FF83A5D2" Stretch="Fill" Data="M2,9L3,9 4,9 5,9 6,9 7,9 8,9 9,9 10,9 11,9 12,9 13,9 14,9 14,10 13,10 12,10 11,10 10,10 9,10 8,10 7,10 6,10 5,10 4,10 3,10 2,10z M14,8L15,8 15,9 14,9z M1,8L2,8 2,9 1,9z M15,2L16,2 16,3 16,4 16,5 16,6 16,7 16,8 15,8 15,7 15,6 15,5 15,4 15,3z M3,2L4,2 5,2 6,2 6,3 5,3 5,4 5,5 5,6 5,7 6,7 6,8 5,8 4,8 3,8 3,7 4,7 4,6 4,5 4,4 4,3 3,3z M0,2L1,2 1,3 1,4 1,5 1,6 1,7 1,8 0,8 0,7 0,6 0,5 0,4 0,3z M14,1L15,1 15,2 14,2z M1,1L2,1 2,2 1,2z M2,0L3,0 4,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 13,0 14,0 14,1 13,1 12,1 11,1 10,1 9,1 8,1 7,1 6,1 5,1 4,1 3,1 2,1z"/>
                                        <Path Fill="White" Stretch="Fill" Margin="2" Data="M4,0L5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 12,1 12,2 12,3 12,4 12,5.0000001 12,6 11,6 10,6 9,6 8,6 7,6 6,6 5,6 4,6 4,5.0000001 3,5.0000001 3,4 3,3 3,2 3,1 4,1z M0,0L1,0 1,1 2,1 2,2 2,3 2,4 2,5.0000001 1,5.0000001 1,6 0,6 0,5.0000001 0,4 0,3 0,2 0,1z"/>
                                    </Grid>
                                    <Grid x:Name="ErrorIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="16" Visibility="Collapsed">
                                        <Grid.ToolTip>
                                            <ToolTip x:Name="validationTooltip" Content="{TemplateBinding Errors}" Placement="Bottom">
                                                <ToolTip.Template>
                                                    <ControlTemplate TargetType="{x:Type ToolTip}">
                                                        <Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
                                                            <Grid.RenderTransform>
                                                                <TranslateTransform X="-25"/>
                                                            </Grid.RenderTransform>
                                                            <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
                                                            <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
                                                            <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
                                                            <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>
                                                            <Border Background="#FFDC000C" CornerRadius="2"/>
                                                            <Border CornerRadius="2">
                                                                <ItemsControl>
                                                                    <ItemsControl.ItemTemplate>
                                                                        <DataTemplate>
                                                                            <TextBlock Margin="8,4" MaxWidth="250" Foreground="White" Text="{Binding}" TextWrapping="Wrap"/>
                                                                        </DataTemplate>
                                                                    </ItemsControl.ItemTemplate>
                                                                    <ItemsControl.ItemsPanel>
                                                                        <ItemsPanelTemplate>
                                                                            <StackPanel IsItemsHost="True"/>
                                                                        </ItemsPanelTemplate>
                                                                    </ItemsControl.ItemsPanel>
                                                                </ItemsControl>
                                                            </Border>
                                                        </Grid>
                                                        <ControlTemplate.Triggers>
                                                            <Trigger Property="IsOpen" Value="True">
                                                                <Trigger.EnterActions>
                                                                    <BeginStoryboard x:Name="OpenAnimation">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Duration="00:00:00.2000000" Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0"/>
                                                                            <DoubleAnimation Duration="00:00:00.2000000" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1"/>
                                                                        </Storyboard>
                                                                    </BeginStoryboard>
                                                                </Trigger.EnterActions>
                                                                <Trigger.ExitActions>
                                                                    <StopStoryboard BeginStoryboardName="OpenAnimation"/>
                                                                </Trigger.ExitActions>
                                                            </Trigger>
                                                            <Trigger Property="IsOpen" Value="True">
                                                                <Setter Property="RenderTransform" TargetName="Root">
                                                                    <Setter.Value>
                                                                        <TranslateTransform X="0"/>
                                                                    </Setter.Value>
                                                                </Setter>
                                                                <Setter Property="Opacity" TargetName="Root" Value="1"/>
                                                            </Trigger>
                                                            <Trigger Property="IsOpen" Value="False">
                                                                <Setter Property="Opacity" TargetName="Root" Value="0"/>
                                                            </Trigger>
                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </ToolTip.Template>
                                            </ToolTip>
                                        </Grid.ToolTip>
                                        <Path Stretch="Fill" Margin="1" Data="M3,12.999999L4,12.999999 5,12.999999 6,12.999999 7,12.999999 8,12.999999 9,12.999999 10,12.999999 11,12.999999 11,13.999999 10,13.999999 9,13.999999 8,13.999999 7,13.999999 6,13.999999 5,13.999999 4,13.999999 3,13.999999z M11,11.999999L12,11.999999 12,12.999999 11,12.999999z M2.0000001,11.999999L3,11.999999 3,12.999999 2.0000001,12.999999z M12,10.999999L13,10.999999 13,11.999999 12,11.999999z M1,10.999999L2.0000001,10.999999 2.0000001,11.999999 1,11.999999z M13,2.9999992L14,2.9999992 14,3.9999992 14,4.9999992 14,5.9999992 14,6.9999992 14,7.9999992 14,8.9999992 14,9.9999992 14,10.999999 13,10.999999 13,9.9999992 13,8.9999992 13,7.9999992 13,6.9999992 13,5.9999992 13,4.9999992 13,3.9999992z M0,2.9999992L1,2.9999992 1,3.9999992 1,4.9999992 1,5.9999992 1,6.9999992 1,7.9999992 1,8.9999992 1,9.9999992 1,10.999999 0,10.999999 0,9.9999992 0,8.9999992 0,7.9999992 0,6.9999992 0,5.9999992 0,4.9999992 0,3.9999992z M12,1.9999999L13,1.9999999 13,2.9999992 12,2.9999992z M1,1.9999999L2.0000001,1.9999999 2.0000001,2.9999992 1,2.9999992z M11,0.99999994L12,0.99999994 12,1.9999999 11,1.9999999z M2.0000001,0.99999994L2.9999998,0.99999994 2.9999998,1.9999999 2.0000001,1.9999999z M2.9999998,0L3.9999998,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 11,0.99999994 10,0.99999994 9,0.99999994 8,0.99999994 7,0.99999994 6,0.99999994 5,0.99999994 3.9999998,0.99999994 2.9999998,0.99999994z">
                                            <Path.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#FFFC9999" Offset="0"/>
                                                    <GradientStop Color="#FFC26666" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Path.Fill>
                                        </Path>
                                        <Path Fill="White" Stretch="Fill" Margin="7,3" Data="M1.4901161E-07,8L1.0000001,8 2.0000002,8 2.0000002,9 2.0000002,10 1.0000003,10 1.0000003,9 1.0000001,10 1.4901161E-07,10 1.4901161E-07,9z M1.4901161E-07,0L1.0000001,0 2.0000002,0 2.0000002,1 2.0000002,2 2.0000002,3 2.0000002,4.0000001 2.0000002,5 2.0000002,5.9999999 2.0000002,7 1.0000001,7 1.4901161E-07,7 1.4901161E-07,5.9999999 1.4901161E-07,5 1.4901161E-07,4.0000001 1.4901161E-07,3 1.4901161E-07,2 0,1z"/>
                                        <Path Stretch="Fill" Data="M4,15L5,15 6,15 7,15 8,15 9,15 10,15 11,15 12,15 12,16 11,16 10,16 9,16 8,16 7,16 6,16 5,16 4,16z M12,14L13,14 13,15 12,15z M3,14L4,14 4,15 3,15z M13,13L14,13 14,14 13,14z M2,13L3,13 3,14 2,14z M14,12L15,12 15,13 14,13z M1,12L2,12 2,13 1,13z M7,11L7,12 7,13 8,13 9,13 9,12 9,11 8,11z M15,4L16,4 16,5 16,6 16,7 16,8 16,9 16,10 16,11 16,12 15,12 15,11 15,10 15,9 15,8 15,7 15,6 15,5z M0,4L1,4 1,5 1,6 1,7 1,8 1,9 1,10 1,11 1,12 0,12 0,11 0,10 0,9 0,8 0,7 0,6 0,5z M14,3L15,3 15,4 14,4z M7,3L7,4 7,5 7,6 7,7 7,8 7,9 7,10 8,10 9,10 9,9 9,8 9,7 9,6 9,5 9,4 9,3 8,3z M1,3L2,3 2,4 1,4z M13,2L14,2 14,3 13,3z M4,2L5,2 6,2 7,2 8,2 9,2 10,2 11,2 12,2 12,3 13,3 13,4 14,4 14,5 14,6 14,7 14,8 14,9 14,10 14,11 14,12 13,12 13,13 12,13 12,14 11,14 10,14 9,14 8,14 7,14 6,14 5,14 4,14 4,13 3,13 3,12 2,12 2,11 2,10 2,9 2,8 2,7 2,6 2,5 2,4 3,4 3,3 4,3z M2,2L3,2 3,3 2,3z M12,1L13,1 13,2 12,2z M3,1L4,1 4,2 3,2z M4,0L5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 12,1 11,1 10,1 9,1 8,1 7,1 6,1 5,1 4,1z">
                                            <Path.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="Red" Offset="0"/>
                                                    <GradientStop Color="#FF990000" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Path.Fill>
                                        </Path>
                                    </Grid>
                                    <Border x:Name="PART_RowResizer" Cursor="SizeNS" VerticalAlignment="Bottom" Height="2" Background="Transparent"/>
                                </Grid>
                            </Border>
                        </Border>-->
                    </telerik:SelectiveScrollingGrid>
                </Border>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="True"/>
                            <Condition Property="DisplayVisualCues" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Visibility" TargetName="Background_Selected" Value="Visible"/>
                        <!--<Setter Property="Background" TargetName="NavigatorIndicatorBackground">
                            <Setter.Value>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="#FFE2F0FD" Offset="1"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>-->
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="DisplayVisualCues" Value="True"/>
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Visibility" TargetName="Background_Over" Value="Visible"/>
                    </MultiTrigger>
                    <!--<Trigger Property="IsValid" Value="False">
                        <Setter Property="Visibility" TargetName="ErrorIndicator" Value="Visible"/>
                        <Setter Property="Visibility" TargetName="EditIndicator" Value="Collapsed"/>
                        <Setter Property="Visibility" TargetName="NavigatorIndicator" Value="Collapsed"/>
                    </Trigger>-->
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsValid" Value="False"/>
                            <Condition Property="DisplayVisualCues" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Visibility" TargetName="Background_Invalid" Value="Visible"/>
                    </MultiTrigger>
                    <!--<Trigger Property="IsCurrent" Value="True">
                        <Setter Property="Visibility" TargetName="NavigatorIndicator" Value="Visible"/>
                    </Trigger>-->
                    <!--<Trigger Property="IsInEditMode" Value="True">
                        <Setter Property="Visibility" TargetName="EditIndicator" Value="Visible"/>
                    </Trigger>-->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderBrush" Value="#FFB3D0F3"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="AllowDrop" Value="True"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>

In practice, I would not require the ability for the user to specify groups. This will be used to group items in a fixed and pre-defined manner. The ability to sort or otherwise interact with the group data is also not that important to me, however, I will need to interact with and be able to edit the information in the actual rows (ungrouped columns).

If anyone can point me in the right direction or just offer some advice, I would be greatly appreciative. Please let me know if further clarification of my issue is required.

Sincerely,
    Mark

[Ben]

Here's a slight update to my issue.

I think I have found the problem (or at least a solution). Rather than attaching the width to the group row, I am just attaching it to the grid itself (I only need to have one group, so this is fine for me at least for now). 

The main change is in the style. There is a very obscure fact about specifying bindings which relate to attached properties that I was hitherto unaware of. When the Path refers to an Attached Property, the property must be surrounded in brackets. I.E.:

Width="{Binding Path=loc:GroupingHelper.GroupColumnWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadGridView}}}"

needs to be written as:

Width="{Binding Path=(loc:GroupingHelper.GroupColumnWidth), RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadGridView}}}"

The brackets, apparently, make all the difference.

Nothing like spending a good day and a half chasing some missing brackets :-)

This discovery has basically solved my initial problem, just thought I'd share it with the couple of people who happen to read this far down.

Regards,
    Mark