Column Header Customization

• Jun 11, 2019
• 2 minutes to read

A column header identifies a column, displays the column’s caption and allow a user to move and resize the column, apply sorting and filtering, etc.

Specify the DataViewBase.ShowColumnHeaders property to show/hide column headers in the current GridControl‘s view.

Header Elements

The image below shows elements that a column header can contain:

The following table lists column header elements and contains the corresponding references to customization approaches:

Header Element	Description	Topic
Header Caption	Identifies column content.	Header Content Customization
Header Image	Provides graphical information about column content.	Header Image Customization
Customization Area	Allows you to display custom content within a column header.	Using Customization Area
Header Tooltip	Displayed when a user hovers the mouse pointer over the column header.	Header Tooltip Customization
Filter and Sort Glyphs	Allows users to filter and sort column values.	Inner Column Header Template Customization

Header Style

Use the BaseColumn.HeaderStyle / DataViewBase.ColumnHeaderStyle properties to customize column headers’ appearance.

Note

The BaseColumn.HeaderStyle property takes precedence over the DataViewBase.ColumnHeaderStyle property.

Note

Target Type: BaseGridHeader

Example 1

The code sample below shows how to make the CategoryName column’s header blue and always show the filter button:

XAML

<dxg:GridColumn FieldName="CategoryName">
   <dxg:GridColumn.HeaderStyle>
      <Style TargetType="dxg:BaseGridHeader">
         <Setter Property="dxg:BaseGridColumnHeader.ShowFilterButtonOnHover" Value="False" />
         <Setter Property="Background" Value="LightSkyBlue" />
      </Style>
   </dxg:GridColumn.HeaderStyle>
</dxg:GridColumn>

Example 2

The code sample below shows how to apply a style to all column headers within the View:

Xaml

<dxg:TableView>
    <dxg:TableView.ColumnHeaderStyle>
        <Style TargetType="dxg:BaseGridHeader">
            <Setter Property="dxg:BaseGridColumnHeader.ShowFilterButtonOnHover" Value="False" />
            <Setter Property="Background" Value="LightSkyBlue" />
        </Style>
    </dxg:TableView.ColumnHeaderStyle>
</dxg:TableView>

Tip

GitHub Example: How to Specify Column Header Style

Print Styles And Templates

Use the following print styles and templates to customize a column header when the GridControl is printed:

Property	Description
ColumnBase.PrintColumnHeaderStyle TableView.PrintColumnHeaderStyle / TreeListView.PrintColumnHeaderStyle)	Gets or sets the style applied to the column header(s) when the grid is printed.
DataViewBase.PrintHeaderTemplate	Gets or sets the template that defines the appearance of column headers when the grid is printed.

Tip

GitHub Example: How to Use Custom Printing Templates