Re: DataGrid CellTemplate / CellEditingTemplate - WPF Discussion Boards

Yeah man, like Mycroft said... randomly changing a hyperlink <-> combobox is UGLY and not a very good UI IMO. Controls shouldn't randomly change types. It might make sense in your head, but it wouldn't make sense to a user.

I don't like the behavior of the datagrid when using the celltemplate and cell editting template elements of WPF.

<DataGridTemplateColumn
                    Header="Street Name"
                    Width="77">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding street}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <TextBox
                                Text="{Binding street, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>

You have to double tab to access the editing feature of the cell, you have to double click to edit it and it is when you use a combobox it gets even worse. Has anyone managed to make the DG usable? As it stands right now I need it, but I am almost embarrassed to release software with such erratic behavior. Does anyone have pointers on making this thing useful? My major issues are the double clicking issue with cellediting / celltemplate and the usability of a drop down:

<DataGridTemplateColumn
                    Header="State"
                    Width="60">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding PropertyState.name}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <ComboBox
                                ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.PropertyStates, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}"
                                DisplayMemberPath="name"
                                SelectedValuePath="id"
                                SelectedValue="{Binding stateId}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>

If this thing is a pain, is there a useful method of validating the datagrid without using the celltemplate / celleditingtemplate?

Cheers, --EA

Thats probably just how the control works by default. If you don't like the behavior, you can always change it Smile | :)

. I'm guessing you want a single click to go into edit mode? My first approach would be to catch the single click and if the cell contains a control, put it into edit mode. Lots and lots of gotchas though. A text box should go into edit mode directly on the first click, but a combobox should only go into edit mode if you click the edit portion. I don't think it should go into edit mode if you click the drop down button. Or maybe it should? You need to play with it. You'll probably have to special case a few of the control types to get what you want. I.e. if the control is a text box do this, if you the control is a combobox, do this instead. Another gotcha I can see is if you catch the click too early, you'll "break" the controls. For example, a push button should be executed on release, not on click. The click on a button just gives it focus and captures mouse focus so you can mouse off the button with the mouse still pressed and come back and it'll get pressed again, etc.

Having read SH01s answer and the fact that you rarely see this type of question (editing in a SL datagrid) I feel it reinforces a design decision I have made and advocate.

NEVER USE A LIST CONTROL AS AN EDIT CONTROL

I apply the same rule to winforms, 99% of the time I use a dedicated edit form/control to do editing, either pop a dialog or have a dedicated details control on the form. The ONLY exception I allow is when the user need to edit 1 (and only 1) single cell of either textbox or checkbox.

The combobox in SL is such a PITA I would never even consider using it in a gridview. Change you design!

Never underestimate the power of human stupidity
RAH

So in this instance of a workspace based WPF desktop application would you consider a master / details layout in order to edit a row as opposed to in row editing? I fail to see why it would be discouraged to use a control that has editing functionality to edit, especially when it improves the user experience when working as intended.

Still, as it is not working as intended it is what it is. It would have been much easier for the user to allow in place editing.

Thanks for the insight, though.

Cheers, --EA

I don't really agree with Mycroft that you shouldn't allow in place row editing. Thats silly. Thats EXACTLY what a data grid is for. If you go into Excel and can't edit cells, you would be thouroughly confused. Just do what I suggested in my other response and tweak the control to your liking.

I think it is ridiculous to have to create a workaround for a dysfunctional control. In this particular issue, the "New Row" behavior of a datagrid is so erratic that I am hesitant to use it. The editing of existing rows is easy enough, but the adding a new row is a pain in the butt that I am almost willing to mitigate the pain of by adding a small control on the screen to insert new rows into the datagrid.

Has anyone had success with new rows? My issue is primarily that the comboxbox / textbox cellediting template leaves the textbox blank when you choose an item from the combobox in the following code:

<DataGridTemplateColumn
                    Header="State"
                    Width="60">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding PropertyState.name}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <ComboBox
                                ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.PropertyStates, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}"
                                DisplayMemberPath="name"
                                SelectedValuePath="id"
                                SelectedValue="{Binding stateId}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>

After I choose an item from the drop down and leave the field it is a blank textbox.

Ok, first of all, before I get into your question, I'm guessing you haven't worked with WPF too long or extensively? Pretty much *ALL* the WPF controls are dysfunctional and immature when compared to the WinForms and Win32 versions. You have to remember that WPF controls are built from scratch from the ground up, not built on top of other technologies. I'm working on the ListView control at the moment because I needed to implement a lot of the missing features that came for free with the WinForms/Win32/MFC versions. So far, I've written about 3000 lines of C# code and about 1000 lines of XAML. That code is *NOT* sprinkled with 10 page comments or crazy white space or anything like that. That is ~4000 lines of straight up code to implement all the missing features in the ListView control. I would only need about 25% of this code if I was using Winforms or Win32. It sucks, sure, but thats part of playing with WPF Smile | :)

. I'm sure MSFT will bring the controls up to snuff in the next few versions of WPF as some of the controls are missing really big features.

Anyways, with that being said...

Your template does look a bit suspicious to me, unless I'm missing something:

* Seems like you normally show PropertyState.name in the TextBlock
* Seems like your ComboBox shows a list of PropertyStates, displaying the name property with a property called stateId indicating the selected item

So...

1) you might want to get rid of the UpdateSourceTrigger=PropertyChanged and add Mode=TwoWay just to make sure that is working as expected... in certain situations the default values are different then what you might expect.

2) the big problem I see here is that assuming you are writing the combobox selection to stateId correctly as two-way, how exactly is the "PropertyState" and/or "PropertyState.name" notification happening? There isn't anything in your XAML that would indicate PropertyState.name is getting a notification change. I would think the ComboBox should write the selection to PropertyState no?

This is my first WPF project, you are correct there. I am not one hundred percent clear on the whole dependency property situation yet, so I am not entirely sure on how to update the PropertyState.name. Should I add an OnPropertyChanged("PropertyState") to the SelectedItem? I confess I am a little murky on one way - two way updates, the documentation for that has been vexing.

I will read more into it in hopes of scraping it together.

Cheers, --EA

Ok, well, theres basically two main ways you can tell the WPF data binding engine that something has changed.

1) Dependency Properties (or DP for short - the whole DependencyProperty.Register... mumbo jumbo)
2) INotifyPropertyChanged (or INPC for short)

These two methods are independent of each other. A DP doesn't use INPC and vice versa. A DP has its own infrastructure to notify of updates. INPC requires you to implement the PropertyChanged event and manually send out notifications.

Convention dictates that DPs are typically only used in controls and ViewModels use INPC.

DPs typically have C# get/set wrappers. It is important that the ONLY code you have there are the GetValue() and SetValue() calls. Thats it. Not one thing more. Not a single thing Smile | :)

. Thats because only your code calls the getter & setter. The WPF infrastructure bypasses those completely. You don't want the user call and WPF doing different things.

With IPNC, WPF will call your C# get/set methods, so its consistent there.

Heres a link on binding modes: http://msdn.microsoft.com/en-us/library/system.windows.data.bindingmode.aspx

What is "PropertyState" in your view model? Is that a DP or INPC?

I would think at the very least, you need to change to SelectedValue="{Binding PropertyState}" on the combo box. Not sure at all what "stateId" is all about.

PropertyState is really neither. It is actually a linked table to the item "SelectedItem" which is of type property. So the datagrid is bound to public ObservableCollection<property>AllProperties and PropertyState would be SelectedItem.PropertyState.name on a row by row basis. So it has no public characteristics of it's own, but is rather exposed through the logical element Property.

Top of the datagrid:

<DataGrid
            ItemsSource="{Binding AllProperties}"
            AutoGenerateColumns="False"
            SelectedItem="{Binding SelectedItem}"
            GridLinesVisibility="Horizontal"
            CanUserDeleteRows="False"
            Grid.Row="0"
            RowStyle="{StaticResource RowStyle}">

ViewModel Items:

public Property SelectedItem
{
    get { return _selectedItem; }
    set
    {

        if (value == null)
            return;

        _selectedItem = value;
        OnPropertyChanged("SelectedItem");
    }
}

private void LoadProperties()
{
    var query = _db.Properties.Where(p => p.claimId == _claimId && p.active);
    AllProperties = new ObservableCollection<Property>(query.ToList());
}

private void LoadStates()
{
    var query = _db.PropertyStates;
    PropertyStates = new ObservableCollection<PropertyState>(query.ToList());
}

Does that make enough sense? I realize it is kind of a mess. SelectedItem<property> is an INPC.

If your combobox is showing PropertyStates, the SelectedItem is going to be a PropertyState. So you need to have an INPC of PropertyState. Both the combobox and the textblock need to bind to that property.

Perhaps additional code will help to clarify.

public ObservableCollection<Property> AllProperties { get; private set; }
    public ObservableCollection<PropertyState> PropertyStates { get; private set; }
    public ObservableCollection<StreetSuffix> StreetSuffixes { get; private set; }
    public ICommand SaveCommand { get { return new RelayCommand(param => Save(), CanSaveExecute); } }
    public Property SelectedItem
    {
        get { return _selectedItem; }
        set
        {

            if (value == null)
                return;

            _selectedItem = value;
            OnPropertyChanged("SelectedItem");
        }
    }
    public StreetSuffix SelectedSuffix
    {
        get { return _selectedSuffix; }
        set
        {
            if (value == null)
                return;

            _selectedSuffix = value;
            OnPropertyChanged("SelectedSuffix");
            OnPropertyChanged("SelectedItem");
        }
    }

    #endregion

    #region private helpers

    private void LoadProperties()
    {
        var query = _db.Properties.Where(p => p.claimId == _claimId && p.active);
        AllProperties = new ObservableCollection<Property>(query.ToList());
    }

    private void LoadStreetSuffixes()
    {
        var query = _db.StreetSuffixes;
        StreetSuffixes = new ObservableCollection<StreetSuffix>(query.ToList());
    }

    private void LoadStates()
    {
        var query = _db.PropertyStates;
        PropertyStates = new ObservableCollection<PropertyState>(query.ToList());
    }

And the view:

<DataGrid
            ItemsSource="{Binding AllProperties}"
            AutoGenerateColumns="False"
            SelectedItem="{Binding SelectedItem}"
            GridLinesVisibility="Horizontal"
            CanUserDeleteRows="False"
            Grid.Row="0"
            RowStyle="{StaticResource RowStyle}">
            
            <DataGrid.RowValidationRules>
                <local:RowDataInfoValidationRule
                    ValidationStep="UpdatedValue" />
            </DataGrid.RowValidationRules>
            
            <DataGrid.CellStyle>
                <Style
                    TargetType="{x:Type DataGridCell}">
                    <Style.Triggers>
                        <Trigger
                            Property="IsSelected"
                            Value="True">
                            <Setter
                                Property="Foreground"
                                Value="WhiteSmoke" />
                            <Setter
                                Property="Background"
                                Value="LightSlateGray" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.CellStyle>
            
            <DataGrid.Columns>
                <DataGridTextColumn
                    Header="Number"
                    Width="54">
                    <DataGridTextColumn.Binding>
                        <Binding
                            Path="number">
                            <Binding.ValidationRules>
                                <local:CellDataInfoValidationRule
                                    ValidationStep="UpdatedValue" />
                            </Binding.ValidationRules>
                        </Binding>
                    </DataGridTextColumn.Binding>
                </DataGridTextColumn>
                <DataGridTemplateColumn

                    Header="Direction"
                    Width="58">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding direction}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <TextBox
                                Text="{Binding direction, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn
                    Header="Street Name"
                    Width="77">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding street}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <TextBox
                                Text="{Binding street, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn
                    Header="Type"
                    Width="55">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding StreetSuffix.abbreviation}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                                <ComboBox
                                    ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.StreetSuffixes}"
                                    DisplayMemberPath="name"
                                    SelectedValuePath="id"
                                    SelectedValue="{Binding suffixId}"
                                    SelectedItem="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.SelectedSuffix}" />
                            </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn
                    Width="55"
                    Binding="{Binding unit}"
                    Header="Unit" />
                <DataGridTemplateColumn
                    Header="City"
                    Width="75">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding city}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <TextBox>
                                <Binding
                                    Path="city">
                                    <Binding.ValidationRules>
                                        <local:CellDataInfoValidationRule
                                            ValidationStep="UpdatedValue" />
                                    </Binding.ValidationRules>
                                </Binding>
                            </TextBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn
                    Header="State"
                    Width="60">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock
                                Text="{Binding PropertyState.name}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                    <DataGridTemplateColumn.CellEditingTemplate>
                        <DataTemplate>
                            <ComboBox
                                ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.PropertyStates, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}"
                                DisplayMemberPath="name"
                                SelectedValuePath="id"
                                SelectedValue="{Binding stateId}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellEditingTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn
                    Header="Zip Code"
                    Width="60">
                    <DataGridTextColumn.Binding>
                        <Binding
                            Path="zip">
                            <Binding.ValidationRules>
                                <local:CellDataInfoValidationRule
                                    ValidationStep="UpdatedValue" />
                            </Binding.ValidationRules>
                        </Binding>
                    </DataGridTextColumn.Binding>
                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>

So "Selected Item" refers to the selected item of the datagrid, not the selected item of the combobox. Is that my issue? That I need to bind to an ancestor?

It looks to me like the ComboBox is using this:

ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.PropertyStates, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}"

So ComboBox is showing PropertyStates, that looks like ObservableCollection<PropertyState> to me, so its a collection of PropertyState objects. Thus each item in the ComboBox is a PropertyState. ComboBox.SelectedValue is going to be a PropertyState as well.

Right now you are binding ComboBox.SelectedValue to: SelectedValue="{Binding stateId}" . You aren't showing what stateId is.

The TextBlock is binding to "{Binding PropertyState.name}" which has to be a property of some sort on your ViewModel. You aren't showing that either.

So your problem is that your combobox.SelectedValue is binding to something completely different from the TextBlock, they need to bind to the same property so when you go to edit, you'll have the right item selected and when you are done editing, the TextBlock will have the correct text.

Binding StateId refers to the stateId of the datagrid's datacontext. Rather, it is a field on the property table, so it is one of the columns on SelectedItem<property>

So if this is all EF, as it is, then you have a Property Table and a PropertyState table with a FK - PK relationship. So if a property is in the state of CA, then the Property Table has stateId = 1, and PropertyState has Id:1|Name:California. Maybe I am too bound up in the WinForms world where the "Selected Value" of a combobox makes everything work automagically, but in this case my thought process was this:

{Binding PropertyState.name} simply gets the name of the state from the PropertyState table that belongs to whatever the stateID of the SelectedItem is. It obviously all works as it is, with the exception of a new item.

My thought on this was because the item does not yet have an item in the AllProperties collection, the UI is unable to resolve the relationship of Property (new) to PropertyState.

I could be way off base here. To maybe try a different tact, how would you deal with a datagrid in which you wanted to have a FK combo box column that constrains user choices, as in the scenario above? A simple address datagrid that has a drop down for State or Street Type or whatever?

I grabbed this piece of code, which I understand - Except for the "IsHitTestVisible="False" part.

What is a HitTest and what is the impact of setting/not setting this property?

<ContentControl Width="100"
              Height="100"
              Padding="1"
              Canvas.Left="710"
              Canvas.Top="300"
              Style="{StaticResource DesignerItemStyle}">
<Ellipse IsHitTestVisible="False" >
  <Shape.Fill>
    <RadialGradientBrush Center="0.2, 0.2" GradientOrigin="0.2, 0.2" RadiusX="0.8" RadiusY="0.8">
      <GradientStop Color="LightBlue" Offset="0"/>
      <GradientStop Color="Blue" Offset="0.9"/>
    </RadialGradientBrush>
  </Shape.Fill>
</Ellipse>
</ContentControl>

Thanks

Everything makes sense in someone's mind

Basically, this property determines whether or not a hit test can take place against a visual element. This has the effect of selectively altering the visual tree for the purposes of hit testing. Here's an example - suppose you have a map, and you want to get the coordinates of a point on the map - but you don't want any pushpins on it to be included in the tests, then setting this to false for the pushpins means the hit test would take place against the map, and not any pushpins.

I hope that explains it.

I'm not a stalker, I just know things. Oh by the way, you're out of milk.

Forgive your enemies - it messes with their heads

My blog | My articles | MoXAML PowerToys | Onyx

Sort of.

I still don't understand what a HitTest is.

Everything makes sense in someone's mind

Ah. Imagine clicking on a point on the screen - the point you click at is the hit. It's a way of determining whether or not a control is affected by a click (perhaps you're writing a drag manager; and no this isn't your burly boss coming in wearing a dress)

I'm not a stalker, I just know things. Oh by the way, you're out of milk.

Forgive your enemies - it messes with their heads

My blog | My articles | MoXAML PowerToys | Onyx

Ok, I got it. So IsHitTestVisible="False" means the object does not responde to a hit test?

Everything makes sense in someone's mind

Yes. A reason to do this is because you might have layered your control over the top of another one, and set it so that it's invisible - it will intercept mouse clicks destined for the lower control unless you set the hit test to false.

I'm not a stalker, I just know things. Oh by the way, you're out of milk.

Forgive your enemies - it messes with their heads

My blog | My articles | MoXAML PowerToys | Onyx

ahh, ok. I get it.

Thanks

Everything makes sense in someone's mind

One more thing Kevin, and I apologise for not mentioning it. Setting IsHitTestVisible="false" on a container affects the children of the container as well. This is something to be very careful of because you can find that your hit testing doesn't behave quite the way you'd think it does by things higher up the tree. Here's a test for you to try:

XML

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="HitTester.MainWindow"
  x:Name="Window"
  Title="Hit testable window"
  Width="788" Height="621">

  <Canvas IsHitTestVisible="False">
    <Button Content="Button" Width="75" IsHitTestVisible="True" />
  </Canvas>
</Window>

I'm not a stalker, I just know things. Oh by the way, you're out of milk.

Forgive your enemies - it messes with their heads

My blog | My articles | MoXAML PowerToys | Onyx

Ok, will do. Thanks

Everything makes sense in someone's mind

I'm so glad POH gave you a sensible answer b/c the first thing that I thought of was if someone smacks you in the face and you react then you have been hittested. A number of other facetious replies also occurred to me but you get the point. Laugh | :laugh:

Never underestimate the power of human stupidity
RAH