Suggestion: Make combo boxes update values on selection changed

[jpageacsys]

Hi, I switched over my app to using the WinUI Table view. Users keep complaining that when they change comboboxes in the table, the values don't save. I had a hard time replicating this, but I found that if I change the comobox value, and then immdiately navigate away from the page, refresh, or restart, the value doesn't save. However, if I click away from the cell so it's unfocused, it does save.

While I think saving on cell edit finished is the intended behavior, it's not what users expect and can lead to frustration if the user changes the value and they have to remember to click away from the cell to actually submit the change.

I'd suggest subscribing to SelectionChanged and updating the source when the value changes as well.

This is the workaround class I made for my app as a workaround for now:

/// <summary>
/// Represents a column in a TableView that displays a ComboBox and commits changes immediately when selection changes.
/// </summary>
[StyleTypedProperty(Property = nameof(ElementStyle), StyleTargetType = typeof(TextBlock))]
[StyleTypedProperty(Property = nameof(EditingElementStyle), StyleTargetType = typeof(ComboBox))]
#if WINDOWS
[WinRT.GeneratedBindableCustomProperty]
#endif
public partial class TableViewAutoCommitComboBoxColumn : TableViewBoundColumn
{
    private Binding? _textBinding;
    private Binding? _selectedValueBinding;

    /// <summary>
    /// Generates a TextBlock element for the cell.
    /// </summary>
    /// <param name="cell">The cell for which the element is generated.</param>
    /// <param name="dataItem">The data item associated with the cell.</param>
    /// <returns>A TextBlock element.</returns>
    public override FrameworkElement GenerateElement(TableViewCell cell, object? dataItem)
    {
        var textBlock = new TextBlock
        {
            Margin = new Thickness(12, 0, 12, 0),
        };

        if (!string.IsNullOrEmpty(DisplayMemberPath))
        {
            textBlock.SetBinding(FrameworkElement.DataContextProperty, Binding);
            textBlock.SetBinding(TextBlock.TextProperty, new Binding { Path = new PropertyPath(DisplayMemberPath) });
        }
        else
        {
            textBlock.SetBinding(TextBlock.TextProperty, Binding);
        }

        return textBlock;
    }

    /// <summary>
    /// Generates a ComboBox element for editing the cell.
    /// </summary>
    /// <param name="cell">The cell for which the editing element is generated.</param>
    /// <param name="dataItem">The data item associated with the cell.</param>
    /// <returns>A ComboBox element.</returns>
    public override FrameworkElement GenerateEditingElement(TableViewCell cell, object? dataItem)
    {
        var comboBox = new ComboBox { HorizontalAlignment = HorizontalAlignment.Stretch };
        comboBox.SetBinding(ItemsControl.ItemsSourceProperty, new Binding { Source = this, Path = new PropertyPath(nameof(ItemsSource)) });
        comboBox.SetBinding(Selector.SelectedValuePathProperty, new Binding { Source = this, Path = new PropertyPath(nameof(SelectedValuePath)) });
        comboBox.SetBinding(ItemsControl.DisplayMemberPathProperty, new Binding { Source = this, Path = new PropertyPath(nameof(DisplayMemberPath)) });
        comboBox.SetBinding(Selector.SelectedItemProperty, Binding);
        comboBox.SetBinding(ComboBox.IsEditableProperty, new Binding { Source = this, Path = new PropertyPath(nameof(IsEditable)) });

        if (TextBinding is not null)
        {
            comboBox.SetBinding(ComboBox.TextProperty, TextBinding);
        }

        if (SelectedValueBinding is not null)
        {
            comboBox.SetBinding(Selector.SelectedValueProperty, SelectedValueBinding);
        }

        // Subscribe to SelectionChanged to commit immediately
        comboBox.SelectionChanged += OnComboBoxSelectionChanged;

        return comboBox;
    }

    /// <summary>
    /// Handles the SelectionChanged event of the ComboBox to commit changes immediately.
    /// </summary>
    private void OnComboBoxSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (sender is ComboBox comboBox)
        {
            // Update the binding source immediately when selection changes
            var bindingExpression = comboBox.GetBindingExpression(Selector.SelectedItemProperty);
            bindingExpression?.UpdateSource();

            // Also update SelectedValue binding if present
            var selectedValueBindingExpression = comboBox.GetBindingExpression(Selector.SelectedValueProperty);
            selectedValueBindingExpression?.UpdateSource();

            // Update Text binding if present
            var textBindingExpression = comboBox.GetBindingExpression(ComboBox.TextProperty);
            textBindingExpression?.UpdateSource();
        }
    }

    /// <inheritdoc/>
    protected override object? PrepareCellForEdit(TableViewCell cell, RoutedEventArgs routedEvent)
    {
        if (cell.Content is ComboBox comboBox)
        {
            return comboBox.SelectedItem;
        }

        return base.PrepareCellForEdit(cell, routedEvent);
    }

    /// <inheritdoc/>
    protected override void EndCellEditing(TableViewCell cell, object? dataItem, TableViewEditAction editAction, object? uneditedValue)
    {
        if (cell.Content is ComboBox comboBox)
        {
            // Unsubscribe from the event to prevent memory leaks
            comboBox.SelectionChanged -= OnComboBoxSelectionChanged;

            if (editAction == TableViewEditAction.Commit)
            {
                // Ensure binding is updated one final time
                var bindingExpression = comboBox.GetBindingExpression(Selector.SelectedItemProperty);
                bindingExpression?.UpdateSource();
            }
        }
    }

    /// <summary>
    /// Gets or sets the items source for the ComboBox.
    /// </summary>
    public object? ItemsSource
    {
        get => GetValue(ItemsSourceProperty);
        set => SetValue(ItemsSourceProperty, value);
    }

    /// <summary>
    /// Gets or sets the path to the display member for the ComboBox.
    /// </summary>
    public string? DisplayMemberPath
    {
        get => (string?)GetValue(DisplayMemberPathProperty);
        set => SetValue(DisplayMemberPathProperty, value);
    }

    /// <summary>
    /// Gets or sets the path to the selected value for the ComboBox.
    /// </summary>
    public string? SelectedValuePath
    {
        get => (string?)GetValue(SelectedValuePathProperty);
        set => SetValue(SelectedValuePathProperty, value);
    }

    /// <summary>
    /// Gets or sets a value indicating whether the ComboBox is editable.
    /// </summary>
    public bool IsEditable
    {
        get => (bool)GetValue(IsEditableProperty);
        set => SetValue(IsEditableProperty, value);
    }

    /// <summary>
    /// Gets or sets the binding for the text property of the ComboBox.
    /// </summary>
    public virtual Binding TextBinding
    {
        get => _textBinding!;
        set
        {
            _textBinding = value;
            if (_textBinding is not null)
            {
                _textBinding.Mode = BindingMode.TwoWay;
            }
        }
    }

    /// <summary>
    /// Gets or sets the binding for the selected value property of the ComboBox.
    /// </summary>
    public virtual Binding SelectedValueBinding
    {
        get => _selectedValueBinding!;
        set
        {
            _selectedValueBinding = value;
            if (_selectedValueBinding is not null)
            {
                _selectedValueBinding.Mode = BindingMode.TwoWay;
            }
        }
    }

    /// <summary>
    /// Identifies the SelectedValuePath dependency property.
    /// </summary>
    public static readonly DependencyProperty SelectedValuePathProperty = DependencyProperty.Register(nameof(SelectedValuePath), typeof(string), typeof(TableViewAutoCommitComboBoxColumn), new PropertyMetadata(default));

    /// <summary>
    /// Identifies the DisplayMemberPath dependency property.
    /// </summary>
    public static readonly DependencyProperty DisplayMemberPathProperty = DependencyProperty.Register(nameof(DisplayMemberPath), typeof(string), typeof(TableViewAutoCommitComboBoxColumn), new PropertyMetadata(default));

    /// <summary>
    /// Identifies the ItemsSource dependency property.
    /// </summary>
    public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register(nameof(ItemsSource), typeof(object), typeof(TableViewAutoCommitComboBoxColumn), new PropertyMetadata(default));

    /// <summary>
    /// Identifies the IsEditable dependency property.
    /// </summary>
    public static readonly DependencyProperty IsEditableProperty = DependencyProperty.Register(nameof(IsEditable), typeof(bool), typeof(TableViewAutoCommitComboBoxColumn), new PropertyMetadata(false));
}

[w-ahmad]

@jpageacsys, what version of NuGet package you using?

[jpageacsys]

This is on the 1.4.0-preview1

[w-ahmad]

Got it. Did you try UpdateSourceTrigger = PropertyChangedin your column binding?

[jpageacsys]

Sorry for the late response. Yes, I tried adding UpdateSourceTrigger = PropertyChanged and it doesn't save unless I deselect the cell
Here's what I tried.
<tv:TableViewComboBoxColumn
Header="Customer"
Binding="{Binding Customer, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsReadOnly="{x:Bind ViewModel.CanUpdateCustomer, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}"
ItemsSource="{x:Bind ViewModel.Customers, Mode=OneWay}"/>