Deleting rows in WPF Datagrid using delete button

Question

I have a data grid on my WPF application window, and the data is bound to an observable collection. In the DataGrid, I have set the property CanUserDeleteRows=True and I am able to delete the row by pressing the Delete button on the keyboard.

This doesn't look quite intuitive to me. I want to keep an additional column which has delete button on pressing which the row should get deleted. (something like what can be done in ItemTemplate in ASP.NET)

<DataGrid x:Name="dgrQuestions" AutoGenerateColumns="False" Height="224" HorizontalAlignment="Left" Margin="42,73,0,0" VerticalAlignment="Top" Width="663" ItemsSource="{Binding QueList}" CanUserAddRows="True" CanUserDeleteRows="True">
            <DataGrid.Columns>                
                <DataGridTextColumn Header="Qu" Binding="{Binding Path=Que, UpdateSourceTrigger=PropertyChanged}"/>
                <DataGridTextColumn Header="An" Binding="{Binding Path=Ans, UpdateSourceTrigger=PropertyChanged}"/>
                <DataGridTextColumn Header="Hi" Binding="{Binding Path=Hi, UpdateSourceTrigger=PropertyChanged}"/>

            </DataGrid.Columns>

How to get this functionality of deleting rows by using a button inside the datagrid itself

SomeWritesReserved · Accepted Answer · 2012-08-01 12:42:01Z

19

You can add a DataGridTemplateColumn that contains a button that invokes the Delete command. The DataGrid will handle the Delete command and remove the row.

<DataGridTemplateColumn Header="Actions" IsReadOnly="True">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Button Content="Remove Row" Command="Delete"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

answered Aug 1, 2012 at 12:42

SomeWritesReserved

1,0758 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nebula Over a year ago

This let's the enabled state of all the buttons follow the selected row though. If you enable CanUserAddRows and select that last row the the enabled state of all buttons in the view get disabled. Do you know how to fix that?

Vlad Bezden · Accepted Answer · 2012-08-01 12:45:53Z

You will have to add DataGridTemplateColumn to your grid. Something like

<DataGrid x:Name="dgrQuestions" AutoGenerateColumns="False" Height="224" HorizontalAlignment="Left" Margin="42,73,0,0" VerticalAlignment="Top" Width="663" ItemsSource="{Binding QueList}" CanUserAddRows="True" CanUserDeleteRows="True">
            <DataGrid.Columns>                
           <DataGridTemplateColumn Header="Delete" Width="75">                 
                <DataGridTemplateColumn.CellTemplate>                     
                    <DataTemplate>                         
                        <Button Content="Delete" Tag="{Binding}" Click="OnDelete"/>                     
                    </DataTemplate>                 
                </DataGridTemplateColumn.CellTemplate>             
            </DataGridTemplateColumn>  
                <DataGridTextColumn Header="Qu" Binding="{Binding Path=Que, UpdateSourceTrigger=PropertyChanged}"/>
                <DataGridTextColumn Header="An" Binding="{Binding Path=Ans, UpdateSourceTrigger=PropertyChanged}"/>
                <DataGridTextColumn Header="Hi" Binding="{Binding Path=Hi, UpdateSourceTrigger=PropertyChanged}"/>

            </DataGrid.Columns>

Then bind your button to any ID, or item {Binding} and you can handle event in code behind (OnDelete) or you can bind button directly to the command, but then you will need to bind SelecteItem to the ViewModel and deal with it on Command executed:

SelectedItem="{Binding SelectedItem, Mode=TwoWay}"

Collectives™ on Stack Overflow

Deleting rows in WPF Datagrid using delete button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related