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
- Clicking the delete button deletes the row immediately
- Clicking Delete on the keyboard won't delete the row
- 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
- Created the column with the button and bound it to RadGridViewCommands.Delete
- Used the PreviewKeyDown event to stop the row delete when the user clicks Delete on the keyboard
- 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)
- When I create a new row, I can't click the delete button
- 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: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: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: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