How to add the custom control below row header in WPF DataGrid?
You can add a custom control under the header as extra header by adding an unbound row and customizing the GridUnBoundRowCellRenderer in WPF DataGrid (SfDataGrid).
C#:
void sfDataGrid_QueryUnBoundRow(object sender, Syncfusion.UI.Xaml.Grid.GridUnBoundRowEventsArgs e)
{
if (e.UnBoundAction == UnBoundActions.QueryData)
{
if (e.GridUnboundRow.UnBoundRowIndex == 0 && e.GridUnboundRow.Position == UnBoundRowsPosition.Top)
{
if (e.Column.MappingName == "QS2")
{
e.CellType = "GridUnBoundRowCellTextBoxRendererExt";
e.Value = (sfDataGrid.DataContext as SalesInfoViewModel).DisplayValue;
e.Handled = true;
}
}
}
else if (e.UnBoundAction == UnBoundActions.CommitData)
{
if (e.Column.MappingName == "QS2" && e.Value != null)
{
var binding = new Binding();
binding.Converter = new CurrencyConverter();
binding.ConverterParameter = e.Value.ToString();
sfDataGrid.Columns[2].DisplayBinding = binding;
sfDataGrid.Columns[2].ValueBinding = binding;
}
}
e.Handled = true;
}
You can load a combo box as an EditElement of GridUnboundRowCell. When changing an item in the combo box, the Salary column will be updated through CurrencyConverter as in the following code example.
C#:
//CustomizedUnboundRowCellRenderer.
public override void OnInitializeEditElement(DataColumnBase dataColumn, ComboBox uiElement, object dataContext)
{
List<string> itemsCollection = new List<string>();
itemsCollection.Add("India");
itemsCollection.Add("USA");
uiElement.ItemsSource = itemsCollection;
if (dataColumn.GridUnBoundRowEventsArgs.Value != null)
uiElement.SelectedValue = dataColumn.GridUnBoundRowEventsArgs.Value.ToString();
uiElement.Tag = dataColumn;
}
void uiElement_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
var comboBox = sender as ComboBox;
if (comboBox != null && comboBox.SelectedItem != null)
{
if (comboBox != null && comboBox.SelectedItem != null)
{
(DataGrid.DataContext as SalesInfoViewModel).DisplayValue = comboBox.SelectedItem.ToString();
(comboBox.Tag as DataColumnBase).GridUnBoundRowEventsArgs.Value = comboBox.SelectedItem.ToString();
DataGrid.RaiseQueryUnBoundRow((comboBox.Tag as DataColumnBase).GridUnBoundRowEventsArgs.GridUnboundRow, UnBoundActions.CommitData, (comboBox.Tag as DataColumnBase).GridUnBoundRowEventsArgs.Value, (comboBox.Tag as DataColumnBase).GridColumn, (comboBox.Tag as DataColumnBase).GridUnBoundRowEventsArgs.CellType, new Syncfusion.UI.Xaml.ScrollAxis.RowColumnIndex((comboBox.Tag as DataColumnBase).RowIndex, (comboBox.Tag as DataColumnBase).ColumnIndex));
}
}
}
I hope you enjoyed learning about how to add the custom control below the row header in WPF DataGrid (SfDataGrid).
You can refer to our WPF DataGrid feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF DataGrid example 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!
