[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Implementation Details
   [Expand]Grid View Data Layout
   [Expand]Binding to Data
   [Expand]Master-Detail Data Representation
   [Expand]Data Editing and Validation
   [Expand]Filtering and Searching
   [Expand]Data Summaries
   [Expand]Paging and Scrolling
   [Expand]Focus, Navigation, Selection
   [Expand]Conditional Formatting
   [Collapse]Appearance Customization
     Styles and Templates Overview
     Grid Control Styles
     Grid Elements That Support Templates
     Choosing Templates Based on Custom Logic
     Format Cell Values
     Cell Merging
    [Collapse]Column Header Customization
      Header Content Customization
      Header Image Customization
      Using Customization Area
      Header Tooltip Customization
      Inner Column Header Template Customization
      Customize Header Layout
   [Expand]MVVM Enhancements
   [Expand]Printing and Exporting
   [Expand]End-User Interaction
   [Expand]Performance Improvement
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]End-User Capabilities
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Header Content Customization

This topic describes how to customize the header content. The main part of the header content is a caption. You can change this caption and add different elements to the header content.

Expanded Header Caption

Specify the BaseColumn.Header property to change the column header's caption. The ColumnBase.FieldName property specifies the caption if the BaseColumn.Header property is not specified. Camel-case field names are separated by spaces, for example, the header for the "CategoryName" field name is "Category Name".


Example 1

The code sample below shows how to specify the CategoryName column's header caption and show it in the center:

Example 2

You can bind a column's header to a property and specify the StringFormat:

Expanded Header Content

Specify the BaseColumn.HeaderTemplate property to customize an individual column's header content. You can specify a common template for all columns in the current GridControl's view using the DataViewBase.ColumnHeaderTemplate. The data context (binding source) for these templates is the BaseColumn.HeaderCaption property.

The code sample below shows how to add a button to a header's content:


Example: How to: Display an Image within a Column Header

Learn how to add an image to the column header content using the BaseColumn.HeaderTemplate property.

If you have more than one template that can be used to render the header content, specify the BaseColumn.HeaderTemplateSelector property to implement custom logic for selecting the required template. Use the BaseColumn.ActualHeaderTemplateSelector property to obtain the current template selector.

Expanded Header Content Style

Specify the ColumnBase.ColumnHeaderContentStyle property to change the header content's appearance. Use the DataViewBase.ColumnHeaderContentStyle property to specify the common style applied to all the columns in the current GridControl's view. The target element for these styles is the ContentControl class.

The code sample below shows how to change the header caption color and increase the font size:


Use the ColumnBase.ActualColumnHeaderContentStyle property to obtain the current column header content style.

Expanded See Also

Is this topic helpful?​​​​​​​