How to insert ComboBox in WPF DataGrid StackedHeader?
In WPF DataGrid, 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.
<syncfusion:SfDataGrid.StackedHeaderRows> <syncfusion:StackedHeaderRow> <syncfusion:StackedHeaderRow.StackedColumns> <syncfusion:StackedColumn ChildColumns="OrderID,OrderDate,RequiredDate,CustomerID,Customers.CompanyName,Customers.ContactName,Customers.Phone,ShippedDate,ShipName,ShipAddress,ShipCity,ShipCountry" HeaderText="OrderShipmentDetails" /> </syncfusion:StackedHeaderRow.StackedColumns> </syncfusion:StackedHeaderRow> <syncfusion:StackedHeaderRow> <syncfusion:StackedHeaderRow.StackedColumns> <syncfusion:StackedColumn ChildColumns="OrderID,OrderDate,RequiredDate" HeaderText="Order Details" /> <syncfusion:StackedColumn ChildColumns="CustomerID,Customers.CompanyName,Customers.ContactName,Customers.Phone" HeaderText="Customer Details" /> <syncfusion:StackedColumn ChildColumns="ShippedDate,ShipName,ShipAddress,ShipCity,ShipCountry" HeaderText="Shipment Details " /> </syncfusion:StackedHeaderRow.StackedColumns> </syncfusion:StackedHeaderRow> </syncfusion:SfDataGrid.StackedHeaderRows>
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.
XAML
<Style x:Key="stackedHeaderCell"TargetType="syncfusion:GridStackedHeaderCellControl">
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="0,0,1,1" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10,3,2,3" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:GridStackedHeaderCellControl">
<Border BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" Orientation="Horizontal">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<ComboBox Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Height="10" Width="18">
<ComboBoxItem>Order ID</ComboBoxItem>
<ComboBoxItem>Order Date</ComboBoxItem>
<ComboBoxItem>Customer ID</ComboBoxItem>
<ComboBoxItem>Required Date</ComboBoxItem>
<ComboBoxItem>Company Name</ComboBoxItem>
<ComboBoxItem>Contact Name</ComboBoxItem>
<ComboBoxItem>Phone</ComboBoxItem>
<ComboBoxItem>User</ComboBoxItem>
<ComboBoxItem>Shipped Date</ComboBoxItem>
<ComboBoxItem>Ship Name</ComboBoxItem>
<ComboBoxItem>Ship Address</ComboBoxItem>
</ComboBox>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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.
C#
// Remove the renderer stacked header
grid.CellRenderers.Remove("StackedHeader");
// Add the stacked header with new style
grid.CellRenderers.Add("StackedHeader", new GridStackedHeaderCellRendererExt());
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.
C#
public class GridStackedHeaderCellRendererExt : GridStackedHeaderCellRenderer
{
// override the OnInitializeEditElement
public override void OnInitializeEditElement(DataColumnBase dataColumn, GridStackedHeaderCellControl uiElement, object dataContext)
{
var colum = (dataContext as StackedColumn);
// Apply the custom style for all the StackedHeaders
// Apply the custom style for Order Details StackedHeader
if (colum.HeaderText == "Order Details")
{
var style = App.Current.Resources["stackedHeaderCell"] as Style;
uiElement.Style = style;
}
base.OnInitializeEditElement(dataColumn, uiElement, dataContext);
}
}
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:
I hope you enjoyed learning about how to insert ComboBox in WPF DataGrid StackedHeader.
You can refer to our WPF Grid feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Grid documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
