Merged Column Group header problems

[Jaesoon]

I'm trying to get multi hierarchy column headers to work by using the following guide here: http://docs.telerik.com/devtools/silverlight/controls/radgridview/columns/column-groups

 

However, after following the steps on Example 1, i cannot get the grid columns to show up as shown on the examples.

 

I have tried updating my telerik project (from 2013 to 2015 version) to see if that fixed the issue but this still does not seem to work.

 

My XAML is as follows:

 

01.<telerik:RadGridView.ColumnGroups>
02.    <telerik:GridViewColumnGroup
03.        Name="BlankHeader"
04.        Header="test head" />
05.</telerik:RadGridView.ColumnGroups>
06.
07.<telerik:RadGridView.Columns>
08.
09.    <telerik:GridViewDataColumn
10.        IsReadOnly="True"
11.        MinWidth="200"
12.        DataMemberBinding="{Binding UserName, Mode=OneWay}"
13.        Header="Name"
14.        ColumnGroupName="BlankHeader" />
15.
16.    <telerik:GridViewDataColumn
17.        IsReadOnly="True"
18.        MinWidth="200"
19.        DataMemberBinding="{Binding TeamName, Mode=OneWay}"
20.        Header="Team Name"
21.        ColumnGroupName="BlankHeader" />

 

However, im not seeing the header "test head" above "Name" and the "Team Name" column headers.

 

Is there something else that i need to add or something that i've added previously that may be affecting this behaviour?

 

 

Thanks

[Stefan]

Hi Jaesoon,

As I am not able to reproduce such behavior on my side, I am attaching a small demo application demonstrating the usage of ColumnGroups functionality. It is tested with latest Q3 2015 (2015.3.930) assemblies version.

If it does not help, I would like to encourage you to modify the sample project as per your setup, and send it in a new support thread as an attachment, so we can review it on our side.

Best Regards,
Stefan X1
Telerik

[Jaesoon]

Hi Stefan

 

 Thanks for the sample project,

 I'm having trouble building the project as it says the namespace name RadGridView and GridViewColumnGroup could not be found in the file "MainPage.g.i.cs" when trying to run this project on Visual Studio 2010.

 

I've tried removing and re adding the DLLs and also cleaning and rebuilding to no avail.

 

Any ideas how to get it to run?

 

Thanks

[Jaesoon]

Actually, just found out i had to unblock the dll before getting it to load properly,

 

Thanks for the project, i'll see if i can get my project to work using this and get back to you.

[Jaesoon]

Hi Stefan

 

I've found out that this problem was being caused by a styling that's been applied to our column headers.

After removing the styling, i am able to get the merged group headers to show up.

 

Although removing the styling for the current column headers shows the grouped headers, is there a style that needs to be applied specifically for the grouped column headers to be shown if normal column headers have been formatted?

 

The styles for the grouped column headers are as follows:

001.    <Style
002.        TargetType="telerik:GridViewHeaderRow">
003.        <Setter
004.            Property="Template"
005.            Value="{StaticResource GridViewHeaderRowTemplate}" />
006.        <Setter
007.            Property="Background"
008.            Value="{x:Null}" />
009.        <Setter
010.            Property="MinHeight"
011.            Value="38" />
012.        <Setter
013.            Property="BorderBrush"
014.            Value="{StaticResource text}" />
015.        <Setter
016.            Property="BorderThickness"
017.            Value="0,0,0,1" />
018.        <Setter
019.            Property="VerticalContentAlignment"
020.            Value="Stretch" />
021.        <Setter
022.            Property="HorizontalContentAlignment"
023.            Value="Stretch" />
024.        <Setter
025.            Property="Padding"
026.            Value="0" />
027.    </Style>
028.
029.
030.<ControlTemplate
031.        x:Key="GridViewHeaderRowTemplate"
032.        TargetType="telerik:GridViewHeaderRow">
033.        <telerik:SelectiveScrollingGrid>
034.            <telerik:SelectiveScrollingGrid.ColumnDefinitions>
035.                <ColumnDefinition
036.                    Width="Auto" />
037.                <ColumnDefinition
038.                    Width="Auto" />
039.                <ColumnDefinition
040.                    Width="Auto" />
041.                <ColumnDefinition
042.                    Width="*" />
043.            </telerik:SelectiveScrollingGrid.ColumnDefinitions>
044.            <Border
045.                x:Name="PART_GridViewHeaderRowBorder"
046.                Background="{TemplateBinding Background}"
047.                BorderBrush="{TemplateBinding BorderBrush}"
048.                BorderThickness="{TemplateBinding BorderThickness}"
049.                Grid.ColumnSpan="4"
050.                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
051.                Padding="{TemplateBinding Padding}"
052.                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
053.                <Border.OpacityMask>
054.                    <LinearGradientBrush
055.                        EndPoint="1,0.5"
056.                        StartPoint="0,0.5">
057.                        <GradientStop
058.                            Offset="0"
059.                            Color="#19000000" />
060.                        <GradientStop
061.                            Color="#19FFFFFF"
062.                            Offset="1" />
063.                        <GradientStop
064.                            Color="#667A7A7A"
065.                            Offset="0.5" />
066.                    </LinearGradientBrush>
067.                </Border.OpacityMask>
068.            </Border>
069.            <telerik:DataCellsPresenter
070.                x:Name="PART_DataCellsPresenter"
071.                Grid.Column="3" />
072.            <Border
073.                x:Name="PART_IndicatorPresenter"
074.                BorderBrush="{TemplateBinding BorderBrush}"
075.                BorderThickness="0,0,1,1"
076.                telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
077.                Visibility="{TemplateBinding RowIndicatorVisibility}"
078.                Width="25">
079.                <Border
080.                    BorderBrush="{StaticResource GridView_HeaderInnerBorder}"
081.                    BorderThickness="1"
082.                    Background="{StaticResource GridView_HeaderBackground}" />
083.            </Border>
084.            <telerik:IndentPresenter
085.                x:Name="PART_IndentPresenter"
086.                Grid.Column="1"
087.                ItemTemplate="{StaticResource GridViewHeaderIndentCellDataTemplate}"
088.                IndentLevel="{TemplateBinding IndentLevel}"
089.                MinHeight="{TemplateBinding MinHeight}"
090.                telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
091.                telerik:StyleManager.Theme="{StaticResource Theme}" />
092.            <Border
093.                x:Name="PART_HierarchyIndentPresenter"
094.                BorderBrush="{TemplateBinding BorderBrush}"
095.                BorderThickness="0,0,1,1"
096.                Grid.Column="2"
097.                telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
098.                Visibility="{Binding HasHierarchy, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"
099.                Width="25">
100.                <Border
101.                    BorderBrush="{StaticResource GridView_HeaderInnerBorder}"
102.                    BorderThickness="1"
103.                    Background="{StaticResource GridView_HeaderBackground}" />
104.            </Border>
105.        </telerik:SelectiveScrollingGrid>
106.    </ControlTemplate>
107.
108.<ControlTemplate
109.        x:Key="GridViewRowTemplate"
110.        TargetType="telerik:GridViewRow">
111.        <Border
112.            BorderBrush="{TemplateBinding BorderBrush}"
113.            BorderThickness="{TemplateBinding BorderThickness}">
114.            <VisualStateManager.VisualStateGroups>
115.                <VisualStateGroup
116.                    x:Name="CommonStates">
117.                    <VisualState
118.                        x:Name="Normal" />
119.                    <VisualState
120.                        x:Name="MouseOver">
121.                        <Storyboard>
122.                            <DoubleAnimation
123.                                Duration="0"
124.                                To="1"
125.                                Storyboard.TargetProperty="(UIElement.Opacity)"
126.                                Storyboard.TargetName="PART_DataCellsPresenter"
127.                                d:IsOptimized="True" />
128.                        </Storyboard>
129.                    </VisualState>
130.                    <VisualState
131.                        x:Name="Selected">
132.                        <Storyboard>
133.                            <DoubleAnimation
134.                                Duration="0"
135.                                To="0.6"
136.                                Storyboard.TargetProperty="(UIElement.Opacity)"
137.                                Storyboard.TargetName="Background_Selected"
138.                                d:IsOptimized="True" />
139.                            <DoubleAnimation
140.                                Duration="0"
141.                                To="1"
142.                                Storyboard.TargetProperty="(UIElement.Opacity)"
143.                                Storyboard.TargetName="PART_DataCellsPresenter"
144.                                d:IsOptimized="True" />
145.                        </Storyboard>
146.                    </VisualState>
147.                </VisualStateGroup>
148.            </VisualStateManager.VisualStateGroups>
149.            <telerik:SelectiveScrollingGrid
150.                x:Name="grid">
151.                <telerik:SelectiveScrollingGrid.ColumnDefinitions>
152.                    <ColumnDefinition
153.                        Width="Auto" />
154.                    <ColumnDefinition
155.                        Width="Auto" />
156.                    <ColumnDefinition
157.                        Width="Auto" />
158.                    <ColumnDefinition
159.                        Width="*" />
160.                </telerik:SelectiveScrollingGrid.ColumnDefinitions>
161.                <telerik:SelectiveScrollingGrid.RowDefinitions>
162.                    <RowDefinition
163.                        Height="*" />
164.                    <RowDefinition
165.                        Height="Auto" />
166.                    <RowDefinition
167.                        Height="Auto" />
168.                    <RowDefinition
169.                        Height="Auto" />
170.                </telerik:SelectiveScrollingGrid.RowDefinitions>
171.
172.                <Border
173.                    x:Name="SelectionBackground"
174.                    Background="{TemplateBinding Background}"
175.                    Grid.ColumnSpan="3"
176.                    Grid.Column="1"
177.                    HorizontalAlignment="Stretch"
178.                    Margin="{TemplateBinding Margin}"
179.                    MinWidth="0"
180.                    Padding="{TemplateBinding Padding}"
181.                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
182.                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
183.                <Border
184.                    x:Name="Background_Selected"
185.                    BorderBrush="{StaticResource text}"
186.                    Opacity="0"
187.                    CornerRadius="1"
188.                    BorderThickness="1"
189.                    Grid.ColumnSpan="3"
190.                    Grid.Column="1"
191.                    HorizontalAlignment="Stretch"
192.                    Margin="1,1,1,2"
193.                    MinWidth="0"
194.                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
195.                    <Border
196.                        Background="{StaticResource text}"
197.                        Opacity="0.1"
198.                        BorderThickness="0">
199.                        <Border
200.                            Background="#01FFFFFF"
201.                            BorderThickness="0" />
202.                    </Border>
203.                </Border>
204.
205.                <telerik:GridViewToggleButton
206.                    x:Name="PART_HierarchyExpandButton"
207.                    Grid.Column="2"
208.                    IsHitTestVisible="{Binding IsExpandable, RelativeSource={RelativeSource TemplatedParent}}"
209.                    IsTabStop="{TemplateBinding IsTabStop}"
210.                    IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
211.                    Opacity="{Binding IsExpandable, Converter={StaticResource BooleanToOpacityConverter}, RelativeSource={RelativeSource TemplatedParent}}"
212.                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
213.                    telerik:StyleManager.Theme="{StaticResource Theme}"
214.                    Visibility="{Binding HasHierarchy, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"
215.                    Width="25" />
216.                <Border
217.                    Grid.Column="2"
218.                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
219.                    Visibility="{Binding HasHierarchy, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
220.                <!-- Cell font color and opacity! -->
221.                <telerik:DataCellsPresenter
222.                    Opacity="1"
223.                    x:Name="PART_DataCellsPresenter"
224.                    Grid.Column="3"
225.                    telerik:StyleManager.Theme="{StaticResource Theme}" />
226.                <Border
227.                    x:Name="PART_RowBorder"
228.                    BorderBrush="{TemplateBinding HorizontalGridLinesBrush}"
229.                    BorderThickness="{Binding HorizontalGridLinesWidth, ConverterParameter=Bottom, Converter={StaticResource GridLineWidthToThicknessConverter}, RelativeSource={RelativeSource TemplatedParent}}"
230.                    Grid.ColumnSpan="4"
231.                    Grid.Column="1"
232.                    HorizontalAlignment="Stretch"
233.                    MinWidth="0"
234.                    Grid.RowSpan="4"
235.                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
236.                    VerticalAlignment="Bottom" />
237.                <telerik:DetailsPresenter
238.                    x:Name="PART_DetailsPresenter"
239.                    Grid.ColumnSpan="2"
240.                    Grid.Column="2"
241.                    DetailsProvider="{TemplateBinding DetailsProvider}"
242.                    HorizontalAlignment="Stretch"
243.                    MaxWidth="30000"
244.                    Grid.Row="1"
245.                    telerik:StyleManager.Theme="{StaticResource Theme}" />
246.                <telerik:IndentPresenter
247.                    x:Name="PART_IndentPresenter"
248.                    ItemTemplate="{StaticResource GridViewHeaderIndentCellDataTemplate}"
249.                    Grid.Column="1"
250.                    IndentLevel="{TemplateBinding IndentLevel}"
251.                    Grid.RowSpan="4"
252.                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
253.                <Border
254.                    x:Name="PART_IndicatorPresenter"
255.                    BorderBrush="{StaticResource ControlOuterBorder}"
256.                    BorderThickness="0,0,1,1"
257.                    Grid.Column="0"
258.                    Grid.RowSpan="3"
259.                    telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
260.                    Visibility="{TemplateBinding RowIndicatorVisibility}"
261.                    VerticalAlignment="Stretch"
262.                    Width="25">
263.                    <Border
264.                        x:Name="NavigatorIndicatorBackground"
265.                        BorderBrush="{StaticResource ControlInnerBorder}"
266.                        BorderThickness="1"
267.                        Background="{StaticResource GridView_RowIndicatorCellBackground}">
268.                        <Grid>
269.                            <Grid
270.                                x:Name="NavigatorIndicator"
271.                                HorizontalAlignment="Center"
272.                                Height="11"
273.                                Visibility="Collapsed"
274.                                VerticalAlignment="Center"
275.                                Width="11">
276.                                <Path
277.                                    Data="F1 M 32.0234,6.66669L 24.2923,0.0248413L 28.3697,0.0248413L 32,3.14362L 36.1492,6.70819L 32,10.2728L 28.4664,13.3085L 24.2923,13.3085L 32.0234,6.66669 Z "
278.                                    Fill="{StaticResource GridView_NavigatorIndicatorBackground}"
279.                                    HorizontalAlignment="Center"
280.                                    Height="8"
281.                                    Margin="0"
282.                                    Stretch="Fill"
283.                                    VerticalAlignment="Center"
284.                                    Width="8" />
285.                            </Grid>
286.                            <Grid
287.                                x:Name="EditIndicator"
288.                                HorizontalAlignment="Center"
289.                                Height="10"
290.                                Visibility="Collapsed"
291.                                VerticalAlignment="Center"
292.                                Width="16">
293.                                <Path
294.                                    Data="M14,9 L15,9 15,10 14,10 z M1,9 L2,9 2,10 1,10 z M15,8 L16,8 16,9 15,9 z M0,8 L1,8 1,9 0,9 z M15,1 L16,1 16,2 15,2 z M0,1 L1,1 1,2 0,2 z M14,0 L15,0 15,1 14,1 z M1,0 L2,0 2,1 1,1 z"
295.                                    Fill="{StaticResource GridView_EditIndicatorBackground1}"
296.                                    Stretch="Fill" />
297.                                <Path
298.                                    Data="M0.99999994,6.9999995 L2,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.9999995 z M13,0.99999994 L14,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.9999999 z M0,0.99999994 L0.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.9999999 z M11,0 L12,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-07 z"
299.                                    Fill="{StaticResource GridView_EditIndicatorBackground2}"
300.                                    Margin="1"
301.                                    Stretch="Fill" />
302.                                <Path
303.                                    Data="M2,9 L3,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,10 z M14,8 L15,8 15,9 14,9 z M1,8 L2,8 2,9 1,9 z M15,2 L16,2 16,3 16,4 16,5 16,6 16,7 16,8 15,8 15,7 15,6 15,5 15,4 15,3 z M3,2 L4,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,3 z M0,2 L1,2 1,3 1,4 1,5 1,6 1,7 1,8 0,8 0,7 0,6 0,5 0,4 0,3 z M14,1 L15,1 15,2 14,2 z M1,1 L2,1 2,2 1,2 z M2,0 L3,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,1 z"
304.                                    Fill="{StaticResource GridView_EditIndicatorBackground3}"
305.                                    Stretch="Fill" />
306.                                <Path
307.                                    Data="M4,0 L5,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,1 z M0,0 L1,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,1 z"
308.                                    Fill="{StaticResource GridView_EditIndicatorBackground4}"
309.                                    Margin="2"
310.                                    Stretch="Fill" />
311.                            </Grid>
312.                            <Grid
313.                                x:Name="ErrorIndicator"
314.                                HorizontalAlignment="Center"
315.                                Height="16"
316.                                Visibility="Collapsed"
317.                                VerticalAlignment="Center"
318.                                Width="16">
319.                                <Path
320.                                    Data="M3,12.999999 L4,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.999999 z M11,11.999999 L12,11.999999 12,12.999999 11,12.999999 z M2.0000001,11.999999 L3,11.999999 3,12.999999 2.0000001,12.999999 z M12,10.999999 L13,10.999999 13,11.999999 12,11.999999 z M1,10.999999 L2.0000001,10.999999 2.0000001,11.999999 1,11.999999 z M13,2.9999992 L14,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.9999992 z M0,2.9999992 L1,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.9999992 z M12,1.9999999 L13,1.9999999 13,2.9999992 12,2.9999992 z M1,1.9999999 L2.0000001,1.9999999 2.0000001,2.9999992 1,2.9999992 z M11,0.99999994 L12,0.99999994 12,1.9999999 11,1.9999999 z M2.0000001,0.99999994 L2.9999998,0.99999994 2.9999998,1.9999999 2.0000001,1.9999999 z M2.9999998,0 L3.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.99999994 z"
321.                                    Fill="{StaticResource GridView_ErrorIndicatorBackground1}"
322.                                    Margin="1"
323.                                    Stretch="Fill" />
324.                                <Path
325.                                    Data="M1.4901161E-07,8 L1.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,9 z M1.4901161E-07,0 L1.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,1 z"
326.                                    Fill="{StaticResource GridView_ErrorIndicatorBackground2}"
327.                                    Margin="7,3"
328.                                    Stretch="Fill" />
329.                                <Path
330.                                    Data="M4,15 L5,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,16 z M12,14 L13,14 13,15 12,15 z M3,14 L4,14 4,15 3,15 z M13,13 L14,13 14,14 13,14 z M2,13 L3,13 3,14 2,14 z M14,12 L15,12 15,13 14,13 z M1,12 L2,12 2,13 1,13 z M7,11 L7,12 7,13 8,13 9,13 9,12 9,11 8,11 z M15,4 L16,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,5 z M0,4 L1,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,5 z M14,3 L15,3 15,4 14,4 z M7,3 L7,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,3 z M1,3 L2,3 2,4 1,4 z M13,2 L14,2 14,3 13,3 z M4,2 L5,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,3 z M2,2 L3,2 3,3 2,3 z M12,1 L13,1 13,2 12,2 z M3,1 L4,1 4,2 3,2 z M4,0 L5,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,1 z"
331.                                    Fill="{StaticResource GridView_ErrorIndicatorBackground3}"
332.                                    Stretch="Fill" />
333.                            </Grid>
334.                        </Grid>
335.                    </Border>
336.                </Border>
337.            </telerik:SelectiveScrollingGrid>
338.        </Border>
339.    </ControlTemplate>

[Jaesoon]

Sorry i cant find the edit button so i have to write a new post.

 

The coding for styles is what we have currently, to style the column headers.

 Removing lines 3 to 5 (the StaticResource GridViewHeaderRowTemplate), removes formatting for our column headers which allows the grouped column headers to show up, but doing so will mess up our current formatting.

I have attached a sample picture which roughly shows what i'm trying to achieve.

 

Thanks for your help and please let me know if you need more information.

 

[Stefan]

Hi Jaesoon,

For styling ColumnGroupHeaders you need to apply a Style targeting CommonColumnHeader.
You can take a look at the code snippet below:

<Style TargetType="telerik:CommonColumnHeader">
    <Setter Property="Background" Value="Red" />
    <Setter Property="MinHeight" Value="38" />
    <Setter
    Property="BorderThickness" Value="0,0,0,1" />
    <Setter
    Property="VerticalContentAlignment" Value="Stretch" />
    <Setter
    Property="HorizontalContentAlignment"
    Value="Stretch" />
    <Setter Property="Padding" Value="0" />
</Style>

Can you please give it a try and let me know whether this was the customization you were trying to achieve?

Additionally, you can take a look at the Styling Merged Column Headers topic.

Regards,
Stefan X1
Telerik

[Jaesoon]

Hi Stefan,

 

Thanks for the snippet, i've got it to partially work so far.

 

I've got a question regarding a style that we use:

<telerik:DataCellsPresenter
    x:Name="PART_DataCellsPresenter"
    Grid.Column="3" />

 

Why is it if ​we use this under the telerik:GridViewHeaderRow style template, the grouped column headers do not show up?

I can get the styling i want if i remove the above styling, but removing this styling causes a black box to surround the column headers as displayed in the attachment.

 

Is there a way to remove the black boxes shown on the attached file?

 

The grid column styling (not the grouped column headers) is currently as follows:

<Style
    TargetType="telerik:GridViewHeaderRow">
    <!--<Setter
        Property="Template"
        Value="{StaticResource GridViewHeaderRowTemplate}" />--> This has been commented out to show the grouped column headers.
    <Setter
        Property="Background"
        Value="{x:Null}" />
    <Setter
        Property="MinHeight"
        Value="38" />
    <Setter
        Property="BorderBrush"
        Value="{StaticResource text}" />
    <Setter
        Property="BorderThickness"
        Value="0,0,0,1" />
    <Setter
        Property="VerticalContentAlignment"
        Value="Stretch" />
    <Setter
        Property="HorizontalContentAlignment"
        Value="Stretch" />
    <Setter
        Property="Padding"
        Value="0" />
</Style>

 

Thanks 

[Jaesoon]

Its interesting to note, if i increase the "BorderThickness" value, the black box border gets thicker.

However, setting it to 0 still gives an outline of the border.

What is the control used to target this border line?

[Stefan]

Hello Jaesoon,

We already replied you in the support ticket you opened regarding this issue. In order to avoid double posting, I would kindly ask you to continue any further communication on this topic in it.

Best Regards,
Stefan X1
Telerik