---
sidebar_position: 3
title: Add Delete Action
---

## Add Delete Action

In order to delete an element we will therefore modify the grid in order to add an action allowing the deletion of our element.

For this we are going to modify the column already containing our navigation link to the modification.

Open the `Pages/List.razor` file and add the highlighted changes as follows:

```cshtml title="Pages/List.razor"
...

    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Action">
        <DisplayTemplate>
            <a href="Edit/@(context.Id)" class="btn btn-primary"><i class="fa fa-edit"></i> Editer</a>
			// highlight-next-line
            <button type="button" class="btn btn-primary" @onclick="() => OnDelete(context.Id)"><i class="fa fa-trash"></i> Supprimer</button>
        </DisplayTemplate>
    </DataGridColumn>
</DataGrid>
```

In the code of our page `Pages/List.razor.cs` add the method:

```csharp title="Pages/List.razor.cs"
...

private void OnDelete(int id)
{

}
```