Delete data items (Angular)link

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

Quick video - CRUD pages from data sourcelink

Step-by-steplink

• 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 applicationlink

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

Step 2: Add the MS SQL data sourcelink

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

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

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

Step 4: Enable deletinglink

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.