Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio

Delete data items (Angular)

This guide demonstrates how allow the user to delete data items in a Radzen application.

Quick video - CRUD pages from data source

Step-by-step

  • Step 1: Create and configure the application
  • Step 2: Add the MS SQL data source
  • Step 3: Create a page and data-bind a grid component
  • Step 4: Enable deleting

Step 1: Create and configure the application

Create a new Radzen application by following the first step from the quickstart guide.

Step 2: Add the MS SQL data source

Add a data source by following step 2 from the create data items guide.

Step 3: Create a page and data-bind a grid component

Add a data grid component and data-bind it by following step 3 from the create data items guide.

Step 4: Enable deleting

Now let’s allow the user to delete data items and persist the changes.

  1. Select the DataGrid component.
  2. Check AllowDelete. This will create an additional column with a delete button.
  3. Go to the Events tab of the data grid.
  4. Add a handler of the Delete event.
  5. Set Type to Invoke data source method.
  6. Set Name to deleteProduct.
  7. Add a Parameter.
  8. Set Name to Id.
  9. Set Value to ${event.Id}.
  10. Add Then handler.
  11. Set Type to Show notification. We want to notify the user that the data item has been successfully deleted.
  12. Set Severity to success.
  13. Set Summary to Success.
  14. Set Detail to ${event.Id} was deleted!.

You can now run the application to verify that you can delete products.