Delete button not working when editing row

[Marc]

I'm trying to create a column with a delete button that the user will use to delete rows. I want to force the user to use this button when they want to delete a row.

These were my requirements

1. Clicking the delete button deletes the row immediately
2. Clicking Delete on the keyboard won't delete the row
3. The user can't enter the delete row by clicking outside of the button or using Tab to move between cells

Things I've done so far

1. Created the column with the button and bound it to RadGridViewCommands.Delete
2. Used the PreviewKeyDown event to stop the row delete when the user clicks Delete on the keyboard
3. Set TabStopMode="Skip" and IsReadOnly="true" on the column with the delete buttons to keep the use from entering the delete column

So far this works but I found two issues (possibly the same issue but may require different solutions)

1. When I create a new row, I can't click the delete button
2. If I edit the value in a cell, I can't click the delete button

I figured they may be the same issue because they both have to do with being in edit mode for a row.

 

Issue when creating a new row

I run my project, click the bottom of the grid to create a new row, then try clicking the delete button on that row. Nothing happens.

It probably doesn't make much sense to delete a row while it's being added so that may be why this doesn't work. If possible I would like the delete button to cancel adding the new row, so kind of like a delete. If this isn't possible, I would like to be able to hide the button when a new row is created so it's obvious to the user they can't click it.

 

Issue when editing a row

I run my project, double click in one of the cells to start editing the cell, the try clicking the delete button. Again, nothing happens. The cell being edited seems to lose focus and no longer shows the edit box but I can't click the delete button. To get the delete to work I have to single click into a different cell and then click the delete button.

 

I appreciate any help you can provided.

 

This is the XAML for MainWindow

<Window
    x:Class="TelerikWpfGridViewDeleteButton.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TelerikWpfGridViewDeleteButton"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525"
    DataContext="{StaticResource MyViewModel}">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <telerik:RadGridView
            Name="RadGridViewVariableCutOff"
            ItemsSource="{Binding GridRows}"
            Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
            GroupRenderMode="Flat"
            NewRowPosition="Bottom"
            ShowGroupPanel="False"
            RowIndicatorVisibility="Collapsed"
            CanUserFreezeColumns="False"
            AutoGenerateColumns="False"
            SelectionMode="Single"
            SelectionUnit="Cell"
            PreviewKeyDown="RadGridViewVariableCutOff_PreviewKeyDown">

            <telerik:StyleManager.Theme>
                <telerik:Office_SilverTheme/>
            </telerik:StyleManager.Theme>

            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn
                    Header="First Value"
                    Width="1*"
                    DataMemberBinding="{Binding Path=FirstValue}"/>

                <telerik:GridViewDataColumn
                    Header="Second Value"
                    Width="1*"
                    DataMemberBinding="{Binding Path=SecondValue}"/>

                <telerik:GridViewDataColumn
                    Header=""
                    Width="26"
                    TabStopMode="Skip"
                    IsReadOnly="True"
                    CellStyle="{StaticResource TelerikNoCellPadding}">

                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadButton
                                Template="{StaticResource FlatImageButton}"
                                Margin="0"
                                Command="telerikGrid:RadGridViewCommands.Delete"
                                CommandParameter="{Binding}">
                                <Image Source="Delete_WithPadding.png"/>
                            </telerik:RadButton>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>

                    <telerik:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>

                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

 

This is the code behind for MainWindow

using System.Windows;
using System.Windows.Input;

namespace TelerikWpfGridViewDeleteButton
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void RadGridViewVariableCutOff_PreviewKeyDown(object sender, System.Windows.Input.KeyEventArgs e)
        {
            if (e.Key == Key.Delete) e.Handled = true;
        }
    }
}

 

This is my view model

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace TelerikWpfGridViewDeleteButton
{
    public class MyViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<RowData> gridRows;
        public ObservableCollection<RowData> GridRows
        {
            get
            {
                if (gridRows == null)
                {
                    gridRows = new ObservableCollection<RowData>();
                    gridRows.Add(new RowData() { FirstValue = 1, SecondValue = 2 });
                    gridRows.Add(new RowData() { FirstValue = 3, SecondValue = 4 });
                    gridRows.Add(new RowData() { FirstValue = 4, SecondValue = 6 });
                }

                return gridRows;
            }
            set
            {
                gridRows = value;
                NotifyPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

 

This is the class used in the observable collection

namespace TelerikWpfGridViewDeleteButton
{
    public class RowData
    {
        public decimal FirstValue { get; set; }
        public decimal SecondValue { get; set; }

        public RowData()
        {
        }
    }
}

 

This is my resource dictionary

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:TelerikWpfGridViewDeleteButton">

    <ControlTemplate x:Key="FlatImageButton" TargetType="{x:Type Button}">
        <Border x:Name="bdr_main" SnapsToDevicePixels="True" BorderThickness="1" CornerRadius="0" Background="White">
            <ContentPresenter RecognizesAccessKey="True"></ContentPresenter>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="bdr_main" Property="BorderBrush" Value="Black"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="TelerikNoCellPadding" TargetType="{x:Type telerik:GridViewCell}">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
    </Style>
</ResourceDictionary>

 

And this is my App.xaml

<Application x:Class="TelerikWpfGridViewDeleteButton.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:TelerikWpfGridViewDeleteButton"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <local:MyViewModel x:Key="MyViewModel" />
    </Application.Resources>
</Application>

 

And I've attached the delete button image I used

[Stefan]

Hi Marc,

Thank you for providing the code as a demonstration.

Generally, the reported behavior would be expected. In order the user to be able to delete a given row, the control should be in view mode and there must be a selected item. So, for the scenario when a new item is added, you can disable the column with the delete button as demonstrated in the Enable/Disable Grid Elements help topic. This can be achieved by subscribing to the AddingNewDataItem event of RadGridview. Additionally, you can take a look at the Commands WPF Demo.

As to the second scenario, you need to ensure that the control commits its edit when the cell is changed. A possible solution might be to subscribe to the CurrentCellChanged event of the control and implement custom logic for handling this scenario by calling the CommitEdit() method of RadGridView.

Hope this helps.

Regards,
Stefan X1
Telerik

[Marc]

Thanks for the reply. I only recently had a chance to get back to looking at this code. Calling CommitEdit in the CurrentCellChanged event did help. The first click into the delete row still doesn't do a delete but it at least gets the row out of edit mode so the next click will cause a delete.

 

Two other changes that I made were to set IsReadOnly=True on the column to keep the user from being able to get into edit mode in the delete column and to add a style to the image in my button to make it lighter when disabled. The button was already bound to the telerikGrid:RadGridViewCommands.Delete command so it was disabled when the row was being edited. The image on the button doesn't get grayed out by default when the button is disabled so to the user it wasn't obvious.

 

I'm happy with this solution.

[Stefan]

Hello Marc,

I am happy you have managed to find a solution that suits your needs.

If any other assistance with our components is needed, feel free to contact us.

All the best,
Stefan X1
Telerik by Progress