WPF Datagrid Double Click Cell MVVM Design

2
votes

I have a WPF application that contains a datagrid. It is bound to my List object "Orders" shown below.

public class OrderBlock
{
  public Settings setting;
  public List<Order> orders;
}
public class Order
{
  public int Amount;
  public string OrderID;
  public string OrderIDDup;
  public string Name;
  public string NameDup;
  public bool DupIDs;
  // and some string, int fields
}

For reasons out of my control it is possible that there can be more than one OrderID, hence the OrderIDDup property. My datagrid by default shows just the OrderID and not the OrderIDDup.

What I would like to do is for the user to be able to click on the cell ID and for another window to load to show them the other ID as well as the two names and let them choose which ID should be used.

I have been reading that the WPF DataGrid doesn’t support this functionality of double clicking on a cell. So I am a bit lost as how i should start going about this issue. The other issue I can see is that as I am trying (being the operative word) to use a MVVM design how would this kind of event be exposed to my view model?

Also is this the best way to go about showing such information.

Any help would be great, Thanks, M

4
c#wpfxamlmvvmdatagrid
how about rightclick? or using the normal clickevent with a timer and counter ala if (cell = oldcell && time < maxtime && count ==2) dostuff - WiiMaxx
RowDetails may be another way of accomplishing this - James Sampica
I agree with @jim Rowdetails is the way to go. Then you can have a drop down, button or whatever you want for choosing values. What mvvm framework are you using. Mvvm-Light has an event to command that you can use to bind UI related events to viewmodel functions and preserve the MVVM pattern. - J King
Is there a rightclick event then for wpf datagrids? When you say RowDetails do you mean I can get a row that a user has clicked on & from then detect the column in which they clicked? - mHelpMe
using RowDetailsTemplate you cause each row to act like an expander and expand more information when the row is clicked on. You can put two Textblocks into the template to hold your additional information. Theres plenty of info on this on SO or a google search. - James Sampica

4 Answers

26
votes

Instead of double-clicking on the cell you may double-click on the grid

<DataGrid.InputBindings>
    <MouseBinding Gesture="LeftDoubleClick" 
    Command="{Binding Edit}" 
    CommandParameter="{Binding ElementName=UsersDataGrid, Path=SelectedItem}" />
</DataGrid.InputBindings>

In ViewModel

    public ICommand Edit { get; private set; }

 Edit = new RelayCommand(EditUser, x => _isAdmin);



 private static void EditUser(object usr)
    {
        if (!(usr is User))
            return;

        new UserEditorViewModel(usr as User);
    }
3
votes

We can do this in two ways,

a) By using Dependency property b) By adding System.Windows.Interactivity.dll.

Usually I prefer second way.

step 1: Implement ICommand interface in your view model class file.

step 2: Define your Command,

public ICommand DoubleClickCommand
{
//Do your code
}

step 2: add the above said .dll into your corresponding solution's xaml file.

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

step 3: Inside the Datagrid tag, use the below code to implement InvokeCommandAction Class

<i:Interaction.Triggers>
       <i:EventTrigger EventName="MouseDoubleClick">
             <i:InvokeCommandAction Command="DoubleClickCommand"/>
       </i:EventTrigger>
<i:Interaction.Triggers>

That's it. Hope it helps you:)

1
votes
private void DataGrid_MouseDoubleClick(object sender, MouseButtonEventArgs eventArgs)
{
    if (sender == null) return;
    if (eventArgs.ButtonState != MouseButtonState.Pressed) return; //only react on pressed

    var dataGrid = sender as DataGrid;
    if (dataGrid == null || dataGrid.SelectedItems == null) return;

    if (dataGrid.SelectedItems.Count == 1)
    {
        var simplePension = dataGrid.SelectedItem as ISimplePension;
        if (simplePension != null)
        {
            DataFetcherHolder.DataFetcher.SelectPension(simplePension);
            Execute(EditSelectedPensionFunction);
        }
    }
}
0
votes

I'v used the MouseDoubleClick:

    private void DataGrid_MouseDoubleClick(object sender, MouseButtonEventArgs eventArgs)
    {
        if (sender == null) return;
        if (eventArgs.ButtonState != MouseButtonState.Pressed) return; //only react on pressed

        var dataGrid = sender as DataGrid;
        if (dataGrid == null || dataGrid.SelectedItems == null) return;

        if (dataGrid.SelectedItems.Count == 1)
        {
            var simplePension = dataGrid.SelectedItem as ISimplePension;
            if (simplePension != null)
            {
                DataFetcherHolder.DataFetcher.SelectPension(simplePension);
                Execute(EditSelectedPensionFunction);
            }
        }
    }

When you double-click a data grid, the row is also selected, so I simply find the selected item and use it.