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

GridView HeaderRow Background

10 Answers 89 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Oleg
Top achievements
Rank 1
Oleg asked on 12 Dec 2011, 04:41 PM

Hi there!

I am fighting the whole day with the colors of the GridView to make it as simple as possible for design purposes. I want to have it completely transparent, only the separation line between item rows and header row should be visible/have color.

The only problem - header row (column headers) are always white in their backgrounds. I override the style for GridView, RowStyle and HeaderRowStyle - nothing helps... Need assistance :)

Thanks!

10 Answers, 1 is accepted

Sort by
0
Vlad
Telerik team
answered on 12 Dec 2011, 04:46 PM
Hello,

 Have you tried our Transparent theme? You can check this demo for more info:
http://demos.telerik.com/silverlight/#GridView/Theming

All the best,
Vlad
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Oleg
Top achievements
Rank 1
answered on 13 Dec 2011, 01:00 PM

This almost helped me... I copied the styles and templates from the installation folder "themes" and set all brushes to "transparent" to test if it will make the grid completely blank.

I took the styles for RadGridView, GridViewRow and GridViewHeaderRow and altered these. Unfortunately the header row (ToggleButtons or whatever these are) is still black/orange. Can you tell me what element i need to override in style to achieve the full transparency?

Thx!

0
Oleg
Top achievements
Rank 1
answered on 13 Dec 2011, 04:56 PM
Are these Headers ToggleButtons?
0
Oleg
Top achievements
Rank 1
answered on 14 Dec 2011, 10:03 AM
Anyone? :-(
0
Vlad
Telerik team
answered on 14 Dec 2011, 10:52 AM
Hello,

Actually my suggestion was to use directly our Transparent theme - not to copy Transparent theme style over default grid theme (Office Black). 

Regards,
Vlad
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Oleg
Top achievements
Rank 1
answered on 14 Dec 2011, 10:58 AM

I did it, and the theme was not completely transparent. It was glassy and with a bit of 3D effect.

What i need is 100% transparent grid. 

I made a screenshot of what I achieved - i need only to made the headers same as rows (blank) and make some row and column lines white. 

0
Vlad
Telerik team
answered on 14 Dec 2011, 11:19 AM
Hi,

 Can you post the code where you've applied the Transparent theme?

Best wishes,
Vlad
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Oleg
Top achievements
Rank 1
answered on 14 Dec 2011, 11:28 AM

...

<UserControl.Resources>

<telerik:TransparentTheme x:Key="TransparentTheme"></telerik:TransparentTheme>

</UserControl.Resources>

...

<telerik:RadGridView telerik:StyleManager.Theme="{StaticResource TransparentTheme}"
Name="UsersDataGrid" RowIndicatorVisibility="Collapsed"
ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource AncestorType=controls:UsersList}}"
AutoGenerateColumns="False"
ColumnWidth="*"
ShowGroupPanel="False"
CanUserDeleteRows="False"
CanUserInsertRows="False"
CanUserReorderColumns="False"
CanUserResizeColumns="False"
ShowInsertRow="False"
VerticalGridLinesBrush="Transparent"
HorizontalGridLinesBrush="Transparent"
>
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn>
<telerik:GridViewDataColumn.CellStyle>
<Style TargetType="telerik:GridViewCell">
<Setter Property="Template">
<Setter.Value>
<DataTemplate>
<controls:Avatar DisplayMode="ExtraSmall" User="{Binding}" VerticalAlignment="Center"></controls:Avatar>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:GridViewDataColumn.CellStyle>
</telerik:GridViewDataColumn>
<telerik:GridViewDataColumn Header="FirstName" DataMemberBinding="{Binding FirstName}"/>
<telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}"/>
<telerik:GridViewDataColumn Header="Email" DataMemberBinding="{Binding Email}"/>
<telerik:GridViewDataColumn Header="Company" DataMemberBinding="{Binding Company}"/>
<telerik:GridViewDataColumn Header="Position" DataMemberBinding="{Binding Position}"/>
</telerik:RadGridView.Columns>
</telerik:RadGridView>

0
Oleg
Top achievements
Rank 1
answered on 14 Dec 2011, 01:32 PM
With this transparent theme from telerik I get this style: (check attachment)
0
Oleg
Top achievements
Rank 1
answered on 14 Dec 2011, 01:58 PM

Yay, I finally found the right point! This is what I meant:

<Style TargetType="t:GridViewHeaderCell">

<Setter Property="Background" Value="Transparent"></Setter>

</Style>

So i just overwrite the whole GridViewHeaderCell Style and Template to get what I want. 

Thx anyway!

Tags
GridView
Asked by
Oleg
Top achievements
Rank 1
Answers by
Vlad
Telerik team
Oleg
Top achievements
Rank 1
Share this question
or