We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to insert ComboBox in StackedHeader?

Platform: WinRT |
Control: SfDataGrid |
.NET Framework: 4.5 |
Product Version:

In SfDataGrid, the StackedHeader is loaded with TextBlock as its content that is displayed by StackedColumn.HeaderText. However you can customize the appearance of the StackedHeader by writing the style for the GridStackedHeaderCellControl.

Following code example displays SfDataGrid with definition of StackedHeadersRows.

The requirement is to display ComboBox in StackedHeader for Customer Details StackedColumn. Without specifying the key, the custom style is applied for all the StackedHeaders. Following is the XAML code that denotes the custom style for GridStackedHeaderCellControl with ComboBox inside ControlTemplate.


When you want to apply custom style to a particular StackedColumn, you can override existing renderer for StackedHeader and apply style based on condition.

In SfDataGrid, each column has its own associated CellType and Renderer. StackedColumn uses CellType as StackedHeader”. The associated renderer for StackedHeader CellType is “GridStackedHeaderCellRenderer”. SfDataGrid maintains CellType and its associated renderer in SfDataGrid.CellRenderers dictionary.

Create Renderer (name it as GridStackedHeaderCellRendererExt) to change the style for specified column by overriding from GridStackedHeaderCellRenderer. In the following code default renderer for StackedHeader CellType is removed and the custom renderer is added to the dictionary.


Here you can learn how to customize the style in GridStackedHeaderCellRendererExt class. GridStackedHeaderCellRenderer has OnInitializeEditElement virtual method that is called when GridStackedHeaderCellControl is initialized.

Following parameters are passed to OnInitializeEditElement methods,

  • RowColumnIndex: returns the RowColumnPosition of StackedHeader.
  • GridStackedHeaderCellControl: returns UIElement of GridStackedHeaderCellControl.
  • GridColumn: returns the GridColumn, otherwise returns null.
  • Object: returns DataContext of StackedHeader

StackedColumn is the DataContext for GridStackedHeaderCellControl from where you can access the StackedColumn.HeaderText to apply custom style for particular column alone. The following code example displays the custom style for GridStackedHeaderCellControl that is changed based on StackedColumn.HeaderText.


Custom renderer is already replaced for default renderer. So while running application, this custom renderer gets invoked and custom style is applied for Customer Details StackedColumn as displayed in the following screenshot.

Sample Links:






You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile