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

GridViewExpressionColumn styling

9 Answers 99 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Marc Roussel
Top achievements
Rank 2
Marc Roussel asked on 18 Apr 2011, 07:22 PM

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: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

Sort by
0
Vanya Pavlova
Telerik team
answered on 18 Apr 2011, 07:58 PM
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
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
Marc Roussel
Top achievements
Rank 2
answered on 18 Apr 2011, 08:01 PM
Oh I see that there.s no x:key so I assume its for all the grid.  Ok it works very well.  Thank you

0
Marc Roussel
Top achievements
Rank 2
answered on 18 Apr 2011, 08:08 PM
Can you tell me how to achieve it for the FooterRow also and for the GridViewExpressionColumn Cells ?
0
Vanya Pavlova
Telerik team
answered on 18 Apr 2011, 08:16 PM
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
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
Marc Roussel
Top achievements
Rank 2
answered on 19 Apr 2011, 12:49 PM
Everything now is clear.  Thank you
0
Marc Roussel
Top achievements
Rank 2
answered on 19 Apr 2011, 01:19 PM
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>
0
Marc Roussel
Top achievements
Rank 2
answered on 19 Apr 2011, 01:26 PM
See screenshot :

0
Accepted
Vanya Pavlova
Telerik team
answered on 19 Apr 2011, 01:38 PM
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
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
Marc Roussel
Top achievements
Rank 2
answered on 19 Apr 2011, 01:57 PM
Unbelievable.  You're the king for sure.
Tags
GridView
Asked by
Marc Roussel
Top achievements
Rank 2
Answers by
Vanya Pavlova
Telerik team
Marc Roussel
Top achievements
Rank 2
Share this question
or