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

Header Background Color

18 Answers 470 Views
GridView
This is a migrated thread and some comments may be shown as answers.
jean michel
Top achievements
Rank 1
jean michel asked on 24 Jun 2010, 01:13 PM
Hello,

How I make to modify background color of header in gridview? Im using SL3.

Thanks.

18 Answers, 1 is accepted

Sort by
0
Pavel Pavlov
Telerik team
answered on 24 Jun 2010, 01:16 PM
Hello jean michel,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
jean michel
Top achievements
Rank 1
answered on 24 Jun 2010, 04:13 PM
Hello Pavel,

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!!!
0
Pavel Pavlov
Telerik team
answered on 24 Jun 2010, 04:37 PM
Hello jean michel,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
jean michel
Top achievements
Rank 1
answered on 28 Jun 2010, 01:31 PM
Hello Pavel,

He continues black.
 
The version of its project is SL4. It can be some problem with my version SL3?

Thanks!
0
Pavel Pavlov
Telerik team
answered on 28 Jun 2010, 03:45 PM
Hi jean michel,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
jean michel
Top achievements
Rank 1
answered on 28 Jun 2010, 04:09 PM
Hello Pavel,

Version: 2010.1.0309.1030

Thanks.

0
Pavel Pavlov
Telerik team
answered on 01 Jul 2010, 10:26 AM
Hi jean michel,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
jean michel
Top achievements
Rank 1
answered on 01 Jul 2010, 06:55 PM
Hello Pavel,

it functioned perfectly.

Thanks a lot!!!
0
Luke Ryan
Top achievements
Rank 1
answered on 19 Jul 2010, 04:37 AM
Using the above works great, however when a grouping is assigned to the grid the 'Grouping' Column header still has the default black colour applied. Is there an extra option required to style this column?

Thanks.
0
jean michel
Top achievements
Rank 1
answered on 19 Jul 2010, 08:47 PM
Hello Pavel,

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>
0
Pavel Pavlov
Telerik team
answered on 22 Jul 2010, 12:01 PM
Hello,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
jean michel
Top achievements
Rank 1
answered on 22 Jul 2010, 03:45 PM
Hello Pavel,

My version of the project is SL3.

Error: "Invalid attribute value telerik:GridViewGroupPanelItem for property TargetType."

Thanks...!!!
0
Pavel Pavlov
Telerik team
answered on 23 Jul 2010, 02:27 PM
Hello jean michel,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Emma
Top achievements
Rank 1
answered on 09 Aug 2010, 11:05 AM
Hi, I am trying to do something similar.

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
0
Emma
Top achievements
Rank 1
answered on 09 Aug 2010, 03:12 PM
I have kind of answered this myself, I used

 

 

 

<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

 

0
Pavel Pavlov
Telerik team
answered on 11 Aug 2010, 04:37 PM
Hello Emma,


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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ted
Top achievements
Rank 1
answered on 19 Nov 2010, 09:16 PM
Hello Pavel,

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

0
Vanya Pavlova
Telerik team
answered on 23 Nov 2010, 10:25 AM
Hello 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.

Best wishes,
Vanya Pavlova
the Telerik team
Browse the videos here>> to help you get started with RadControls for Silverlight
Tags
GridView
Asked by
jean michel
Top achievements
Rank 1
Answers by
Pavel Pavlov
Telerik team
jean michel
Top achievements
Rank 1
Luke Ryan
Top achievements
Rank 1
Emma
Top achievements
Rank 1
Ted
Top achievements
Rank 1
Vanya Pavlova
Telerik team
Share this question
or