How to style the GridViewExpressionColumn and the GridViewGroupFooterRow
I would like it with a Background RED and a ForeGround white
I've been able to style the GroupFooterRow that way however, the line is entirely red as I've not been able to make just the cells
in the GroupFooterRow red. For instence I have 3 columns that takes only a small portion of the screen but since the grid is stretch on screen, the redline goes all the way to the right edge of the grid which means the screen width.
Having just the 3 columns GroupFooterRow being red would be nice along with the GridViewExpressionColumn
Right now I have this :
<
UserControl
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
xmlns:SampleData
=
"clr-namespace:Expression.Blend.SampleData.CustomData"
x:Class
=
"Repro.MainPage"
d:DesignHeight
=
"520"
d:DesignWidth
=
"816"
mc:Ignorable
=
"d"
>
<
UserControl.Resources
>
<
Style
x:Key
=
"NoAggregateRowStyle"
TargetType
=
"telerik:GridViewGroupRow"
>
<
Setter
Property
=
"ShowHeaderAggregates"
Value
=
"False"
/>
</
Style
>
<
Style
x:Key
=
"GroupFooterBackgroundStyle"
TargetType
=
"telerik:GridViewGroupFooterRow"
>
<
Setter
Property
=
"Background"
Value
=
"Red"
/>
<
Setter
Property
=
"Foreground"
Value
=
"White"
/>
</
Style
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
telerik:RadGridView
x:Name
=
"rgvTest"
Margin
=
"8"
GroupFooterRowStyle
=
"{StaticResource GroupFooterBackgroundStyle}"
GroupRowStyle
=
"{StaticResource NoAggregateRowStyle}"
/>
</
Grid
>
</
UserControl
>
9 Answers, 1 is accepted
You need to define a style targeted at GridViewGroupFooterCell to achieve the desired result, please refer to the markup below:
<
Style
TargetType
=
"telerik:GridViewGroupFooterCell"
>
<
Setter
Property
=
"Background"
Value
=
"Red"
/>
<
Setter
Property
=
"Foreground"
Value
=
"White"
/>
</
Style
>
Vanya Pavlova
the Telerik team
You may do the same for the cells in GridViewFooterRow, just create a simple style targeted at GridViewFooterCell in the way you need. However I am not quite sure what do you mean by styling GridViewExpressionColumn, do you need to change the cell style in this column or maybe I am missing something? If that is the case just create a style targeted at GridViewCell and set it to this column:
<
Style
x:Key
=
"style1"
TargetType
=
"telerik:GridViewCell"
>
<
Setter
Property
=
"Background"
Value
=
"Blue"
/>
<
Setter
Property
=
"Foreground"
Value
=
"White"
/>
</
Style
>
...
<
telerik:GridViewExpressionColumn
CellStyle={StaticResource style1} ..../>
In a similar way you may set the style for footer cells in each column.
Greetings,
Vanya Pavlova
the Telerik team
I have to set a style in xaml and apply it by C# code. I just don't find the TargetType for this cell.
I tried telerik:GridViewFooterCell and GridViewCell but the application crashes
My actual C# code line is as this, the CellStyle works, the FooterCellStyle works but not the GroupFooterCellStyle :
rgvTest.Columns.Add(
new
GridViewExpressionColumn()
{
Header =
"Total"
,
UniqueName =
"TotalValue"
,
DataFormatString =
"{0:C2}"
,
DisplayIndex = 3,
CellStyle = Resources[
"GridViewCellStyle"
]
as
Style,
FooterCellStyle = Resources[
"GridViewFooterCellStyle"
]
as
Style
});
What is the TargetType for the code above to work for styling the cells that represent the total in Group footer and in Footer of the Expression Column ?
<
Style
x:Key
=
"BigTotalCellStyle"
TargetType
=
"telerik:?????"
>
<
Setter
Property
=
"Background"
Value
=
"Green"
/>
<
Setter
Property
=
"Foreground"
Value
=
"White"
/>
</
Style
>
You have missed to add the expression for this column. Please use the example below:
MainPage.xaml:
<
UserControl.Resources
>
<
Style
x:Key
=
"GridViewCellStyle"
TargetType
=
"telerik:GridViewCell"
>
<
Setter
Property
=
"Background"
Value
=
"Green"
/>
</
Style
>
<
Style
x:Key
=
"GridViewFooterCellStyle"
TargetType
=
"telerik:GridViewFooterCell"
>
<
Setter
Property
=
"Background"
Value
=
"Pink"
/>
</
Style
>
<
Style
x:Key
=
"BigTotalCellStyle"
TargetType
=
"telerik:GridViewGroupFooterCell"
>
<
Setter
Property
=
"Background"
Value
=
"Yellow"
/>
<
Setter
Property
=
"FontSize"
Value
=
"22"
/>
</
Style
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
DataContext
=
"{Binding Source={StaticResource SampleDataSource}}"
>
<
telerik:RadGridView
x:Name
=
"radGridView"
ShowColumnFooters
=
"True"
ShowGroupFooters
=
"True"
ItemsSource
=
"{Binding Collection}"
AutoGenerateColumns
=
"False"
>
<
telerik:RadGridView.Columns
>
<
telerik:GridViewDataColumn
Header
=
"EmployeeName"
DataMemberBinding
=
"{Binding EmployeeName}"
/>
<
telerik:GridViewDataColumn
Header
=
"CompanyName"
DataMemberBinding
=
"{Binding CompanyName}"
/>
<
telerik:GridViewDataColumn
Header
=
"?"
DataMemberBinding
=
"{Binding IsMarried}"
/>
</
telerik:RadGridView.Columns
>
</
telerik:RadGridView
>
<
Button
Content
=
"Button"
HorizontalAlignment
=
"Left"
Height
=
"24"
Margin
=
"240,0,0,8"
VerticalAlignment
=
"Bottom"
Width
=
"72"
Click
=
"Button_Click"
/>
</
Grid
>
MainPage.xaml.cs:
private
void
Button_Click(
object
sender, RoutedEventArgs e)
{
Expression<Func<Item,
double
>> expression = prod => prod.ID * 100;
radGridView.Columns.Add(
new
GridViewExpressionColumn() { Header =
"Total"
,Expression=expression, UniqueName =
"ID"
,DisplayIndex=3, DataFormatString =
"{0:C2}"
, CellStyle =
this
.Resources[
"GridViewCellStyle"
]
as
Style, FooterCellStyle =
this
.Resources[
"GridViewFooterCellStyle"
]
as
Style, GroupFooterCellStyle =
this
.Resources[
"BigTotalCellStyle"
]
as
Style });
}
Best wishes,
Vanya Pavlova
the Telerik team