Create data items

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

How to build the application

  • 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 Add Product page
  • Step 5: Navigate to the Add 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

After finishing step 1 you will see again the My Applications screen with your application on it. Click the application to start editing it.

Click the data button in the upper right corner to add the OData service that your application will use.

This will open the My DataSources screen which allows you to add, edit and delete the data sources which your Radzen application uses. Initially this screen is empty because no data sources have been defined. Click the new button to add a new data source.

  1. Select OData.
  2. Click use sample OData service. This will populate the configuration options of the sample Radzen service.
  3. Click the Next button.

Radzen will then infer the schema of the entities exposed by the OData service. Click the Finish button to create the data source.

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

After finishing step 2 you will see the My DataSources screen. Click the close button at the top right corner.

Click the Create New Page button to add a page. Set the Page Name to Products. Click the Save button.

The page will open in edit mode.

  1. Drag and drop a DataGrid component from the Components toolbox onto the area that says drop a component. This will add a data grid component to the page.
  2. Pick the new … option from the Data dropdown.
  3. Open Operation and set it to getProducts. This will invoke a method of a data source. Radzen maps REST paths to methods e.g. GET /Products becomes getProducts.
  4. Leave the Response set to value. This is the response property that contains the OData response payload.
  5. Click the Autogenerate link next to the Columns property. This generates a column for every property of the Product entity.

Step 4: Create the Add Product page

Now that we have the Products page that displays the list of available products let’s make a new page that will create new products!

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

Open the Add Product page for editing by clicking on its label. Now let’s add a form that will capture the new product details.

  1. Drag and drop a Form component.
  2. Open the Schema picker and select ODataService.Models.Product. This will hint the form designer what properties to enable.
  3. Click Auto generate. This will add a form field for every property of the selected schema.
  4. Scroll to the ID field and remove it. We don’t need to specify the ID property of new products because it is generated server-side.

We have created a form that will capture the user input. Now let’s persist the user changes by invoking a data source method that will create a new product.

  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 createProduct.
  5. Add a new Parameter.
  6. Set Name to Product.The createProduct method takes one parameter which represents the product that has to be created.
  7. Set Value to ${event}. The form component provides the user input as an event argument of the Submit event.
  8. Add a new Then handler. It will execute if createProduct is successful.
  9. Set Type to Navigate to page.
  10. Set Path to Products. This will navigate the user to the Products page.

Step 5: Navigate to the Add Product page

Now let’s navigate to the Add Product page.

  1. Open the Products page for editing.
  2. Select the DataGrid component by clicking it.
  3. Check the AllowAdd property.
  4. Go to the Events of the DataGrid.
  5. Add a new handler of the Add event.
  6. Set Type to Open dialog.
  7. Set Path to Add Product. This will open the Add Product in a dialog.

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

If you hit a bug or want to get in touch please open an issue or send an email to info at radzen.com.

Make sure you are running the latest version: 1.6.0.