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,
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.
This page will automatically be redirected to the sign-in page in 10 seconds.