GridViewExpressionColumn styling

[Marc Roussel]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    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>

[Vanya Pavlova]

Hi Marc,

 

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>

All the best,
Vanya Pavlova
the Telerik team

[Marc Roussel]

Oh I see that there.s no x:key so I assume its for all the grid.  Ok it works very well.  Thank you

[Marc Roussel]

Can you tell me how to achieve it for the FooterRow also and for the GridViewExpressionColumn Cells ?

[Vanya Pavlova]

Hello Marc,

 

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

[Marc Roussel]

Everything now is clear.  Thank you

[Marc Roussel]

I have a last request.  I'm trying to style the Group Footer Cell of the Expression Column and the Footer Cell of that column to GREEN
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>

[Marc Roussel]

See screenshot :

[Vanya Pavlova]

Hello Marc,

 

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

[Marc Roussel]

Unbelievable.  You're the king for sure.