Category / Section
How to load the button command inside the Detailsview WPF DataGrid (SfDataGrid) column and setting AncestorLevel ?
3 mins read
You can load button for a column using GridTemplateColumn in WPF DataGrid (SfDataGrid). You can refer the below article which explains how to bind the button to the command in ViewModel in SfDataGrid.
Reference link: https://www.syncfusion.com/kb/5904
This article explains about how to bind the button with command in ViewModel for details view DataGrid. The DataContext of GridViewDefinition.DataGrid is not same as WPF DataGrid (SfDataGrid). So, you can bind the button to the command in ViewModel using Ancestor binding as in the below code snipet,
XAML
<syncfusion:SfDataGrid
x:Name="dataGrid" ColumnSizer="Star"
ItemsSource="{Binding Path=OrdersDetails}">
<syncfusion:SfDataGrid.DetailsViewDefinition>
<syncfusion:GridViewDefinition RelationalColumn="OrderDetails">
<syncfusion:GridViewDefinition.DataGrid>
<syncfusion:SfDataGrid x:Name="FirstDetailsViewGrid">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTemplateColumn MappingName="CustomerID">
<syncfusion:GridTemplateColumn.CellTemplate>
<DataTemplate>
<Button
Command="{Binding Path=DataContext.ButtonCommand,
RelativeSource={RelativeSource AncestorLevel=2,
AncestorType=syncfusion:SfDataGrid}}"
syncfusion:VisualContainer.WantsMouseInput="True"
syncfusion:FocusManagerHelper.FocusedElement="True"
Content="Click" />
</DataTemplate>
</syncfusion:GridTemplateColumn.CellTemplate>
</syncfusion:GridTemplateColumn>
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</syncfusion:GridViewDefinition.DataGrid>
</syncfusion:GridViewDefinition>
</syncfusion:SfDataGrid.DetailsViewDefinition>
</syncfusion:SfDataGrid>
ViewModel
public class ViewModel
{
private ICommand _buttonCommand;
private List<OrderInfo> _ordersDetails;
/// <summary>
/// Initializes a new instance of the <see cref="ViewModel"/> class.
/// </summary>
public ViewModel()
{
OrderInfoRepository order = new OrderInfoRepository();
OrdersDetails = order.GetOrdersDetails(100);
_buttonCommand = new RelayCommand(ChangeCanExecute);
}
public ICommand ButtonCommand
{
get { return _buttonCommand; }
}
public void ChangeCanExecute(object obj)
{
MessageBox.Show("Button Command Executed");
}
/// <summary>
/// Gets or sets the orders details.
/// </summary>
/// <value>The orders details.</value>
public List<OrderInfo> OrdersDetails
{
get{ return _ordersDetails; }
set{ _ordersDetails = value;}
}
}
