Edit data items (Angular)

This guide demonstrates how to allow the user to edit 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 OData service
• Step 3: Create a page and data-bind a grid component
• Step 4: Create the Edit Product page
• Step 5: Navigate to the Edit Product page

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 OData service

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: Create the Edit Product page

1. Click the Create New Page button to add a page.
2. Set the Page Name to Edit Product.
3. Uncheck Include in navigation. We don’t want this page to appear in the application navigation.
4. Click the Save button.

Now it is time to load the product that the user will edit. We will use a route parameter called Id to get the current product.

1. Open the Edit Product page for editing.
2. Click on an empty space in the design canvas to show the Page Events.
3. Add a new handler of the Load event.
4. Set Type to Invoke data source method.
5. Set Name to getProductById.
6. Add a new Parameter.
7. Set Name to ID.
8. Set Value to ${parameters.Id}.
9. Add a new Then handler.
10. Set Type to Set property.
11. Set Name to product.
12. Set Value to ${result}.

This sequence will load the product by invoking the getProductById method and store the result in the product page property. We will use that property to data-bind the edit form.

We are ready to add the edit form.

1. Drag and drop a Form component.
2. Set Data to product. This will data-bind the form to the product page property.
3. Click Auto generate. This will add a form field for every property of product property.
4. Scroll to the ID field and remove it. We don’t want our users to update the ID property.

We have to handle the Submit event of the form in order to persist the changes.

1. Click Events in the property grid.
2. Add a new event handler of the Submit event.
3. Set Type to Invoke data source method.
4. Set Name to updateProduct.
5. Add a new Parameter.
6. Set Name to ID.
7. Set Value to ${parameters.Id}.
8. Add a second Parameter.
9. Set Name to Product.
10. Set Value to ${event}. The form component provides the user input as an event argument of the Submit event.
11. Add a new Then handler. It will execute if updateProduct is successful.
12. Set Type to Close dialog.

Step 5: Navigate to the Edit Product page

Now let’s navigate to the Edit Product page (we will create it in the next step).

1. Open the Products page for editing.
2. Select the DataGrid component.
3. Go to the Events of the DataGrid.
4. Add a new handler of the Select event.
5. Set Type to Open dialog.
6. Set Path to Edit Product. This will navigate the user to the Edit Product page.
7. Add a new Parameter. The Edit Product page will use that parameter to load the specified product.
8. Set Name to Id.
9. Set Value to ${event.Id}.

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