Column Header Customization

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

ColumnHeaderCustomization

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:

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

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

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.