Preserve default WPF DataGrid cell editing behaviour when using DataGridTemplateColumn

Question

I am working on a WPF MVVM application that uses DataGrids to display data. I am manually defining the columns, and most of the time I use DataGridTextColumn.

When navigating the resulting datagrid using the keyboard, a cell can be highlighted by navigating to it, and the cell value can be changed by starting to type a value. This behaviour works for DataGridTextColumn.

In some cases, I have to use DataGridTemplateColumn, with different bindings for the CellTemplate and the CellEditingTemplate. This allows me to format the displayed value, but return to an unformatted value once the user starts editing the cell. However, the keyboard navigation and editing method described above does not work for my current implementation. I have to highlight the cell and press F2 to edit, or I have to click on the cell with the mouse.

Below is a mockup of my current implementation, in which Foo is in a DataGridTextColumn which works fine, and Bar is in a DataGridTemplateColumn which is giving me trouble.

How can I change the definition of my DataGridTemplateColumn so it has the same keyboard navigation and editing functionality as the DataGridTextColumn?

<DataGrid ItemsSource="{Binding ListItems}">
    <DataGrid.Columns>

        <DataGridTextColumn Binding="{Binding Foo}"
                            Header="Foo" />

        <DataGridTemplateColumn Header="Bar">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ContentPresenter Content="{Binding Path=BarString, Mode=OneWay}"
                                      HorizontalAlignment="Right" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding BarValue, Mode=TwoWay, UpdateSourceTrigger=LostFocus}"
                             HorizontalContentAlignment="Right" />
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>

    </DataGrid.Columns>
</DataGrid>

score 1 · Answer 1 · edited May 23 '17 at 11:49

I had the same exact problem, i wanted the datagrid to beginedit when typing on keyboard i have a solution by extending DataGrid then override OnKeyDown to BeginEdit as follows:

    protected override void OnKeyDown(KeyEventArgs e)
    {
        Key[] ignorableKeys = { Key.Up, Key.Down, Key.Right, Key.Left, Key.Enter, Key.Escape };            
        if (!ignorableKeys.Any((x)=> x == e.Key))
        {
            BeginEdit();
        }
        base.OnKeyDown(e);
    }

But then you will encounter another problem that you must hit tab to actually edit the cell, i think there are alot of posts about that problem like this

score 0 · Answer 2 · answered Jan 09 '13 at 09:10

You need to implement single click editing to overcome this issue. I had the same problem but the difference was that i had a checkbox that i needed to edit. This article helped me.Check it out : http://wpf.codeplex.com/wikipage?title=Single-Click%20Editing

Preserve default WPF DataGrid cell editing behaviour when using DataGridTemplateColumn

2 Answers2