GridViewDataColumn header content foreground color not matching the sort color

2 Answers 64 Views
GridView
Brad
Top achievements
Rank 1
Brad asked on 20 Sep 2023, 05:57 AM

When creating a GridViewDataColumn for a RadGridView to use sometimes I want to add custom content for the header in addition to text.


<telerik:RadGridView Grid.Row="2" AutoGenerateColumns="False" >
      <telerik:RadGridView.Items>
          <TextBlock Text="1" />
          <TextBlock Text="2" />
          <TextBlock Text="3" />
      </telerik:RadGridView.Items>
      <telerik:RadGridView.Columns>
         <telerik:GridViewDataColumn Width="80"
                            HeaderTextAlignment="Center"
                            TextAlignment="Center"
                            IsFilterable="False"
                            DataMemberBinding="{Binding Path=Text}">
    <telerik:GridViewDataColumn.Header>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="Queued"
                       TextAlignment="Center"
                       VerticalAlignment="Center"
                       ToolTipService.ToolTip="The time elapsed" />
            <Path Grid.Column="1"
                  Data="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75ZM12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z"
                  Stroke="#1C274C"
                  Width="12"
                  Height="12"
                  Stretch="Fill" />
        </Grid>
    </telerik:GridViewDataColumn.Header>
</telerik:GridViewDataColumn>
      </telerik:RadGridView.Columns>
  </telerik:RadGridView>

The issue is that when the column is sorted the header color is supposed to change to white (I am using the VisualStudio2019Theme)

This behavior breaks when the header is specified in this way so I was wondering what the best way to restore normal behavior is.

2 Answers, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 21 Sep 2023, 06:37 AM

Hello Brad,

To achieve the desired approach you need to create style triggers for both the Ascending and Descending states of the GridViewHeaderCell style. After that, simply set a binding to the TexbtBlock's foreground and the header cell will get the desired color. 

 <Style TargetType="telerik:GridViewHeaderCell" BasedOn="{StaticResource GridViewHeaderCellStyle}">
     <Style.Triggers>
         <Trigger Property="SortingState" Value="Descending">
             <Setter Property="Foreground" Value="{telerik:VisualStudio2019Resource ResourceKey=MarkerInvertedBrush}" />
         </Trigger>
         <Trigger Property="SortingState" Value="Ascending">
             <Setter Property="Foreground" Value="{telerik:VisualStudio2019Resource ResourceKey=MarkerInvertedBrush}" />
         </Trigger>
     </Style.Triggers>
 </Style>
<telerik:RadGridView Grid.Row="1"  Name="clubsGrid" RowHeight="40" ItemsSource="{Binding Clubs}">
    <telerik:RadGridView.Columns>
     ...
     <TextBlock Text="Queued" TextAlignment="Center"
                       VerticalAlignment="Center"
                       Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type telerik:GridViewHeaderCell}}}" />
     ...
 </telerik:RadGridView>

I hope it helps.

Regards,
Masha
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Brad
Top achievements
Rank 1
commented on 25 Sep 2023, 05:16 AM

Hi Masha,

The solution you have provided does solve the problem however I wonder if having to restyle the header cell on every column is efficient. Also it seems strange that the header cell doesn't already have this behavior by default.

The visual studio 2019 theme sets the foreground property of the ContentControl within the header instead of the header itself so you could achieve the same behavior without restyling the header cell using the following code.

<TextBlock Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type ContentControl}}}" />

I am interested to hear your thoughts on this but either way I have a solution now so thank you.

0
Masha
Telerik team
answered on 27 Sep 2023, 09:48 AM

Hi Brad,

Absolutely, I'm in complete agreement with you. It would greatly improve the user experience if the foreground is updated globally when the SortingState changes. I've already had a discussion with our development team, and we're committed to implementing this as soon as we can.

Thank you for bringing this to our attention!

Regards,
Masha
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
GridView
Asked by
Brad
Top achievements
Rank 1
Answers by
Masha
Telerik team
Share this question
or