Editing Indicator in DataGrid Row Header

Editable grids will quite commonly show an indicator in the row header area to indicate that a row is currently being edited. This is trivial to achieve using Microsoft’s WPF DataGrid.

 GridEditing - Edit Indicator

All that is needed is a DataTemplate assigned to the RowHeaderTemplate property of the DataGrid. The template simply shows or hides the editing image based upon whether the current row is being edited.

<SolidColorBrush x:Key="gridLineBrush" Color="#FFCDEFFE"/>
<DataTemplate x:Key="rowHeaderTemplate">
<StackPanel Orientation="Horizontal">
<Image x:Name="editImage" Source="Images/Edit.png" Width="16" Margin="1,0" Visibility="Hidden"/>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type toolkit:DataGridRow}},Path
="True"> <Setter TargetName="editImage" Property="Visibility" Value="Visible"/> </DataTrigger> </DataTemplate.Triggers> </DataTemplate> <Style TargetType="{x:Type toolkit:DataGrid}"> <Setter Property="GridLinesVisibility" Value="All"/> <Setter Property="HorizontalGridLinesBrush" Value="{StaticResource gridLineBrush}"/> <Setter Property="VerticalGridLinesBrush" Value="{StaticResource gridLineBrush}"/> <Setter Property="RowHeaderTemplate" Value="{StaticResource rowHeaderTemplate}"/> <Style.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/> <SolidColorBrush x:Key="{x:Static toolkit:DataGrid.FocusBorderBrushKey}" Color="{StaticResource gridLineBrush}"/> </Style.Resources> </Style>

There is an IsEditingRowItem property on the DataGrid but unfortunately its private. As it happens my base model class has an IsEditing property as part of its IEditableObject implementation. So I simply bind the visibility of the image to that.

#region IEditableObject Members
public void BeginEdit()
IsEditing = true;
public void CancelEdit()
IsEditing = false;
    // RollbackPropertyValues( _preEditValues );
public void EndEdit()
IsEditing = false;

4 thoughts on “Editing Indicator in DataGrid Row Header”

  1. we will have a look into more advanced concepts. First we will see how we can use the DataGridTemplateColumn to imitate the behavior of a DataGridComboBoxColumn and to show a small chart representing the age deviation from average for each player. We will then have a look on how we can group rows on our DataGrid using two separate methodologies.

Comments are closed.