Delete button not working when editing row

4 posts, 0 answers
  1. Marc
    Marc avatar
    2 posts
    Member since:
    Mar 2016

    Posted 16 May Link to this post

    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

        Title="MainWindow" Height="350" Width="525"
        DataContext="{StaticResource MyViewModel}">
                    <ResourceDictionary Source="Resources.xaml" />
                ItemsSource="{Binding GridRows}"
                Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                        Header="First Value"
                        DataMemberBinding="{Binding Path=FirstValue}"/>
                        Header="Second Value"
                        DataMemberBinding="{Binding Path=SecondValue}"/>
                        CellStyle="{StaticResource TelerikNoCellPadding}">
                                    Template="{StaticResource FlatImageButton}"
                                    <Image Source="Delete_WithPadding.png"/>


    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()
            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
                    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;
                    gridRows = value;
            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

        <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>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="bdr_main" Property="BorderBrush" Value="Black"/>
        <Style x:Key="TelerikNoCellPadding" TargetType="{x:Type telerik:GridViewCell}">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>


    And this is my App.xaml

    <Application x:Class="TelerikWpfGridViewDeleteButton.App"
            <local:MyViewModel x:Key="MyViewModel" />


    And I've attached the delete button image I used

  2. Stefan X1
    Stefan X1 avatar
    482 posts

    Posted 19 May Link to this post

    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.

    Stefan X1
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. DevCraft R3 2016 release webinar banner
  4. Marc
    Marc avatar
    2 posts
    Member since:
    Mar 2016

    Posted 25 Jul in reply to Stefan X1 Link to this post

    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.

  5. Stefan X1
    Stefan X1 avatar
    482 posts

    Posted 27 Jul Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top