GridViewExpressionColumn styling

10 posts, 1 answers
  1. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 18 Apr 2011 Link to this post

    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>
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 18 Apr 2011 Link to this post

    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
  3. DevCraft banner
  4. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 18 Apr 2011 Link to this post

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

  5. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 18 Apr 2011 Link to this post

    Can you tell me how to achieve it for the FooterRow also and for the GridViewExpressionColumn Cells ?
  6. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 18 Apr 2011 Link to this post

    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
  7. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 19 Apr 2011 Link to this post

    Everything now is clear.  Thank you
  8. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 19 Apr 2011 Link to this post

    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>
  9. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 19 Apr 2011 Link to this post

    See screenshot :

  10. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 19 Apr 2011 Link to this post

    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
  11. Marc Roussel
    Marc Roussel avatar
    429 posts
    Member since:
    Dec 2009

    Posted 19 Apr 2011 Link to this post

    Unbelievable.  You're the king for sure.
Back to Top
DevCraft banner