How I make to modify background color of header in gridview? Im using SL3.
Thanks.
18 Answers, 1 is accepted
Please follow this example:
<
telerik:RadGridView
x:Name
=
"gridView"
AutoGenerateColumns
=
"False"
>
<
telerik:RadGridView.HeaderRowStyle
>
<
Style
TargetType
=
"telerik:GridViewHeaderRow"
>
<
Setter
Property
=
"Background"
Value
=
"Pink"
/>
</
Style
>
</
telerik:RadGridView.HeaderRowStyle
>
Greetings,
Pavel Pavlov
the Telerik team
The Header continues black.
My XAML:
<UserControl x:Class="CCM7.Web2.Silverlight.GridFuncionario" |
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" |
xmlns:ControlsW="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" |
xmlns:grid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" |
xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls" |
xmlns:Primitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls" |
xmlns:gridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView" |
xmlns:App="clr-namespace:CCM7.Web2.Silverlight"> |
<UserControl.Resources> |
<DataTemplate x:Name="FuncionarioTemplate"> |
<Controls:RadDockPanel Margin="2" MaxWidth="200"> |
<TextBlock Text="{Binding Nome}" FontWeight="Bold" Controls:RadDockPanel.Dock="Top" /> |
<TextBlock Text="{Binding Cargo}" Controls:RadDockPanel.Dock="Left" /> |
</Controls:RadDockPanel> |
</DataTemplate> |
</UserControl.Resources> |
<Grid x:Name="LayoutRoot"> |
<grid:RadGridView x:Name="GridViewFuncionario" |
dragDrop:RadDragAndDropManager.AllowDrag="True" |
RowIndicatorVisibility="Collapsed" |
IsReadOnly="True" |
AutoGenerateColumns="False" |
ShowGroupPanel="False" |
CanUserFreezeColumns="False" |
CanUserReorderColumns="False" |
CanUserResizeColumns="False" |
CanUserSortColumns="False" |
IsFilteringAllowed="False" |
ColumnWidth="*" |
AlternationCount="2" |
AlternateRowBackground="#EFEFEF" |
> |
<grid:RadGridView.HeaderRowStyle> |
<Style TargetType="gridView:GridViewHeaderRow"> |
<Setter Property="Background" Value="Pink" /> |
</Style> |
</grid:RadGridView.HeaderRowStyle> |
<grid:RadGridView.Columns> |
<grid:GridViewDataColumn Header="Nome" DataMemberBinding="{Binding Nome}" /> |
<grid:GridViewDataColumn Header="Cargo" DataMemberBinding="{Binding Cargo}" /> |
</grid:RadGridView.Columns> |
</grid:RadGridView> |
</Grid> |
</UserControl> |
Thanks!!!
Sorry for the misunderstanding. Here is what has happened :
The background has really changed however since the header cells had solid black background and covered the header row , the pink color could not be seen.
In the attached example I have added a small style to make the header cells Transparent, so that the color of the header row could be visible.
The same style can be used to set any other color ( except transparent ) to the header cells.
Hope this helps.
Regards,
Pavel Pavlov
the Telerik team
He continues black.
The version of its project is SL4. It can be some problem with my version SL3?
Thanks!
To avoid any further confusion , please share with me the exact version of the Telerik dlls you are using and I will adapt the sample to it .
Best wishes,
Pavel Pavlov
the Telerik team
Version: 2010.1.0309.1030
Thanks.
Please excuse me for the late answer. i have finally found what was causing the trouble. In SL3 there is no support for global styles and this was the reason for the header cell style to not apply.
I have added a key for the style and set it explicitly in the column .
Please find the working application attached.
Greetings,
Pavel Pavlov
the Telerik team
it functioned perfectly.
Thanks a lot!!!
Thanks.
Yes, I am not obtaining to modify the color of the border.
<
UserControl
x:Class
=
"CCM7.Web2.Silverlight.GridFuncionario"
xmlns:Controls
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:ControlsW
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
xmlns:grid
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
xmlns:dragDrop
=
"clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
xmlns:Primitives
=
"clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
xmlns:gridView
=
"clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
xmlns:App
=
"clr-namespace:CCM7.Web2.Silverlight"
>
<
UserControl.Resources
>
<
DataTemplate
x:Name
=
"FuncionarioTemplate"
>
<
Controls:RadDockPanel
Margin
=
"2"
MaxWidth
=
"200"
>
<
TextBlock
Text
=
"{Binding Nome}"
FontWeight
=
"Bold"
Controls:RadDockPanel.Dock
=
"Top"
/>
<
TextBlock
Text
=
"{Binding Cargo}"
Controls:RadDockPanel.Dock
=
"Left"
/>
</
Controls:RadDockPanel
>
</
DataTemplate
>
<
Style
TargetType
=
"gridView:GridViewHeaderCell"
x:Key
=
"MyHeaderCellStyle"
>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"Blue"
></
Setter
>
</
Style
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
grid:RadGridView
x:Name
=
"GridViewFuncionario"
dragDrop:RadDragAndDropManager.AllowDrag
=
"True"
RowIndicatorVisibility
=
"Collapsed"
SelectionMode
=
"Multiple"
BorderBrush
=
"#CFCFCF"
BorderThickness
=
"1"
IsReadOnly
=
"True"
AutoGenerateColumns
=
"False"
ShowGroupPanel
=
"False"
CanUserFreezeColumns
=
"False"
CanUserReorderColumns
=
"False"
CanUserResizeColumns
=
"False"
CanUserSortColumns
=
"True"
IsFilteringAllowed
=
"True"
ColumnWidth
=
"*"
AlternationCount
=
"2"
AlternateRowBackground
=
"#EFEFEF"
>
<
grid:RadGridView.HeaderRowStyle
>
<
Style
TargetType
=
"gridView:GridViewHeaderRow"
>
<
Setter
Property
=
"Background"
Value
=
"#CFCFCF"
/>
</
Style
>
</
grid:RadGridView.HeaderRowStyle
>
<
grid:RadGridView.Columns
>
<
grid:GridViewDataColumn
Header
=
"Nome"
HeaderCellStyle
=
"{StaticResource MyHeaderCellStyle}"
DataMemberBinding
=
"{Binding Nome}"
/>
<
grid:GridViewDataColumn
Header
=
"Matricula"
HeaderCellStyle
=
"{StaticResource MyHeaderCellStyle}"
DataMemberBinding
=
"{Binding Matricula}"
/>
<
grid:GridViewDataColumn
Header
=
"Cargo"
HeaderCellStyle
=
"{StaticResource MyHeaderCellStyle}"
DataMemberBinding
=
"{Binding Cargo}"
/>
</
grid:RadGridView.Columns
>
</
grid:RadGridView
>
</
Grid
>
</
UserControl
>
I have extended the project to demonstrate how to style the group header cells as requested.
Project attached.
Kind regards,
Pavel Pavlov
the Telerik team
My version of the project is SL3.
Error: "Invalid attribute value telerik:GridViewGroupPanelItem for property TargetType."
Thanks...!!!
The project attached is for SL3 ( telerik 309 version ) . It has the full header cell style and template extracted - with the border set to yellow ( for illustration purposes) .
* there are two borders in the header cell - inner and outer both set to yellow.
After you modify this style according to your needs, you may set it as a HeaderStyle of the column .
Greetings,
Pavel Pavlov
the Telerik team
I am trying to give my gridview header a gray background,(achieved) with white text.
My question is how do i set the text colour of the header columns? I've tried
<
Setter Property="Foreground" Value="White" />
But i think my textblock styles are somehow overriding it.
Thanks
<Grid.Resources>
<Style TargetType="TextBlock" >
<Setter Property="Foreground" Value="White" />
</Style>
</Grid.Resources>
However i now have to find away to do this with a tabcontrol.
Thanks
Do you mean you need to style the header of the RadTabControl , or there is some issue when the grid is placed in a Tab control
Best wishes,
Pavel Pavlov
the Telerik team
I am a designer working in Blend with an issue simular to those discussed in this thread. I opened the project "
headerbackgroundchange-sl-modified" but when I ran it, I still saw the same issue I am having. I was already able to change the areas that are pink in the sample project, but I can't figure out what to change in order to effect the black group column header.
Any help you can give would be greatly appreciated.
Thanks, Ted
Actually this is the RowIndicator of a GridViewHeaderRow, in its template you can find the PART_IndicatorPresenter and there you can modify the brushes you need.
Attached is a sample project that demonstrates this approach.
Vanya Pavlova
the Telerik team