Single click edit in WPF DataGrid

Question

I want the user to be able to put the cell into editing mode and highlight the row the cell is contained in with a single click. By default, this is double click.

How do I override or implement this?

user_4986278 · Answer

i prefer this way based on Dušan Knežević suggestion. you click an that's it ))

user_4609613 · Answer

I looking for editing cell on single click in MVVM and this is an other way to do it.

Adding behavior in xaml

The EditCellOnSingleClickBehavior class extend System.Windows.Interactivity.Behavior;

public class EditCellOnSingleClick : Behavior
{
    protected override void OnAttached()
    {
        base.OnAttached();
        this.AssociatedObject.LoadingRow += this.OnLoadingRow;
        this.AssociatedObject.UnloadingRow += this.OnUnloading;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        this.AssociatedObject.LoadingRow -= this.OnLoadingRow;
        this.AssociatedObject.UnloadingRow -= this.OnUnloading;
    }

    private void OnLoadingRow(object sender, DataGridRowEventArgs e)
    {
        e.Row.GotFocus += this.OnGotFocus;
    }

    private void OnUnloading(object sender, DataGridRowEventArgs e)
    {
        e.Row.GotFocus -= this.OnGotFocus;
    }

    private void OnGotFocus(object sender, RoutedEventArgs e)
    {
        this.AssociatedObject.BeginEdit(e);
    }
}

Voila !

user_16047108 · Answer

I slightly edit solution from Dušan Knežević

and apply the style to my desire column

user_46926 · Answer

Several of these answers inspired me, as well as this blog post, yet each answer left something wanting. I combined what seemed the best parts of them and came up with this fairly elegant solution that seems to get the user experience exactly right.

This uses some C# 9 syntax, which works fine everywhere though you may need to set this in your project file:

First, we get down from 3 clicks to 2 with this:

Add this class to your project:

public static class WpfHelpers
{
    internal static void DataGridPreviewMouseLeftButtonDownEvent(object sender, RoutedEventArgs e)
    {
        // The original source for this was inspired by https://softwaremechanik.wordpress.com/2013/10/02/how-to-make-all-wpf-datagrid-cells-have-a-single-click-to-edit/
        DataGridCell? cell = e is MouseButtonEventArgs { OriginalSource: UIElement clickTarget } ? FindVisualParent(clickTarget) : null;
        if (cell is { IsEditing: false, IsReadOnly: false })
        {
            if (!cell.IsFocused)
            {
                cell.Focus();
            }

            if (FindVisualParent(cell) is DataGrid dataGrid)
            {
                if (dataGrid.SelectionUnit != DataGridSelectionUnit.FullRow)
                {
                    if (!cell.IsSelected)
                    {
                        cell.IsSelected = true;
                    }
                }
                else
                {
                    if (FindVisualParent(cell) is DataGridRow { IsSelected: false } row)
                    {
                        row.IsSelected = true;
                    }
                }
            }
        }
    }

    internal static T? GetFirstChildByType(DependencyObject prop)
        where T : DependencyObject
    {
        int count = VisualTreeHelper.GetChildrenCount(prop);
        for (int i = 0; i < count; i++)
        {
            if (VisualTreeHelper.GetChild(prop, i) is DependencyObject child)
            {
                T? typedChild = child as T ?? GetFirstChildByType(child);
                if (typedChild is object)
                {
                    return typedChild;
                }
            }
        }

        return null;
    }

    private static T? FindVisualParent(UIElement element)
        where T : UIElement
    {
        UIElement? parent = element;
        while (parent is object)
        {
            if (parent is T correctlyTyped)
            {
                return correctlyTyped;
            }

            parent = VisualTreeHelper.GetParent(parent) as UIElement;
        }

        return null;
    }
}

Add this to your App.xaml.cs file:

protected override void OnStartup(StartupEventArgs e)
{
    base.OnStartup(e);

    EventManager.RegisterClassHandler(
        typeof(DataGrid),
        DataGrid.PreviewMouseLeftButtonDownEvent,
        new RoutedEventHandler(WpfHelpers.DataGridPreviewMouseLeftButtonDownEvent));
}

Then we get from 2 to 1 with this:

Add this to the code behind of the page containing the DataGrid:

private void TransactionDataGrid_PreparingCellForEdit(object sender, DataGridPreparingCellForEditEventArgs e)
{
    WpfHelpers.GetFirstChildByType(e.EditingElement)?.Focus();
}

And wire it up (in XAML): PreparingCellForEdit="TransactionDataGrid_PreparingCellForEdit"

user_8542533 · Answer

I know that I am a bit late to the party but I had the same problem and came up with a different solution:

     public class DataGridTextBoxColumn : DataGridBoundColumn
 {
  public DataGridTextBoxColumn():base()
  {
  }

  protected override FrameworkElement GenerateEditingElement(DataGridCell cell, object dataItem)
  {
   throw new NotImplementedException("Should not be used.");
  }

  protected override FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
  {
   var control = new TextBox();
   control.Style = (Style)Application.Current.TryFindResource("textBoxStyle");
   control.FontSize = 14;
   control.VerticalContentAlignment = VerticalAlignment.Center;
   BindingOperations.SetBinding(control, TextBox.TextProperty, Binding);
    control.IsReadOnly = IsReadOnly;
   return control;
  }
 }

As you can see I wrote my own DataGridTextColumn inheriting everything vom the DataGridBoundColumn. By overriding the GenerateElement Method and returning a Textbox control right there the Method for generating the Editing Element never gets called. In a different project I used this to implement a Datepicker column, so this should work for checkboxes and comboboxes as well.

This does not seem to impact the rest of the datagrids behaviours..At least I haven't noticed any side effects nor have I got any negative feedback so far.

user_4394435 · Answer

Update

A simple solution if you are fine with that your cell stays a textbox (no distinguishing between edit and non-edit mode). This way single click editing works out of the box. This works with other elements like combobox and buttons as well. Otherwise use the solution below the update.


   
      
         http://wpf-tutorial-net.blogspot.com/2016/05/wpf-datagrid-edit-cell-on-single-click.html

How to use it

Add this Style.
The BasedOn is important when you use some fancy styles for your datagrid and you dont wanna lose them.


    



Apply the style with CellStyle to each of your DataGridTextColumns like this:


    
                 
    



And now add this class to the same namespace as your MainViewModel (or a different Namespace. But then you will need to use a other namespace prefix than local). Welcome to the ugly boilerplate code world of attached behaviors.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace YourMainViewModelNameSpace
{
    public static class DataGridTextBoxSingleClickEditBehavior
    {
        public static readonly DependencyProperty EnableProperty = DependencyProperty.RegisterAttached(
            "Enable",
            typeof(bool),
            typeof(DataGridTextBoxSingleClickEditBehavior),
            new FrameworkPropertyMetadata(false, OnEnableChanged));


        public static bool GetEnable(FrameworkElement frameworkElement)
        {
            return (bool) frameworkElement.GetValue(EnableProperty);
        }


        public static void SetEnable(FrameworkElement frameworkElement, bool value)
        {
            frameworkElement.SetValue(EnableProperty, value);
        }


        private static void OnEnableChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is DataGridCell dataGridCell)
                dataGridCell.PreviewMouseLeftButtonDown += DataGridCell_PreviewMouseLeftButtonDown;
        }


        private static void DataGridCell_PreviewMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            EditCell(sender as DataGridCell, e);
        }

        private static void EditCell(DataGridCell dataGridCell, RoutedEventArgs e)
        {
            if (dataGridCell == null || dataGridCell.IsEditing || dataGridCell.IsReadOnly)
                return;

            if (dataGridCell.IsFocused == false)
                dataGridCell.Focus();

            var dataGrid = FindVisualParent(dataGridCell);
            dataGrid?.BeginEdit(e);
        }


        private static T FindVisualParent(UIElement element) where T : UIElement
        {
            var parent = VisualTreeHelper.GetParent(element) as UIElement;

            while (parent != null)
            {
                if (parent is T parentWithCorrectType)
                    return parentWithCorrectType;

                parent = VisualTreeHelper.GetParent(parent) as UIElement;
            }

            return null;
        }
    }
}

Single click edit in WPF DataGrid

13 Answers

First, we get down from 3 clicks to 2 with this:

Then we get from 2 to 1 with this:

Update

Update end

Rant

Features

Sources

How to use it