Quickstart

This guide demonstrates how to create and run a simple Radzen application. The application will display a data grid which is bound to an OData service. You can check the final result online.

Quick video

How to build the application

Prerequisite: Install Radzen

If you haven’t already installed Radzen follow the installation instructions.

Step 1: Create and configure the application

Start Radzen by double clicking its icon. After it starts you will see the My Applications screen which shows all Radzen applications. Initially this screen will be empty. Time to change that!

  • Click the new button to go to the New Application screen.
  • Pick a theme. Radzen provides 12 visual themes out of the box.
  • Set the application name to Radzen Demo.
  • Finally specify the directory where the application will be stored.
  • Click the Create button to complete this step.

Step 2: Add an OData service

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. Click the new button to add a new data source.

  1. Select OData.
  2. Click use sample OData service. This will populate the form with the sample Radzen OData service. Alternatively input your own OData service.
  3. Click Next.

Radzen will then infer all entities and allow you to remove the entities and/or entities properties you don’t need for the current application.

  1. Check Generate pages for CRUD operations. Radzen will then automatically generate pages for create, read, update and delete operations for all entities.
  2. Click the Finish button.

Step 3: Run the application

That’s it! We are ready to see what we have accomplished. Click the run button in the top right corner. Radzen will generate the code required to run the application (Angular components and services), build it and show the result in your browser:

Built-in Car Rental sample application

  • Click the new button to go to the New Application screen.
  • Choose Rent a Car Example
  • Pick a theme, set the application name, specify the directory where the application will be stored and enter your Microsoft SQL Server credentials.
  • By clicking the Create button, Radzen will create sample database, application pages and will open the application for edit.
  • Click the Run button.

The application consists of two parts:

  • Back-end ASP.NET Core C#/VB.NET application which exposes a Microsoft SQL Server database as an OData service.
  • Front-end Angular application.

CRUD pages for the Cars, Categories, Orders tables are automatically generated during database schema infer. Those pages are available if you login using admin/admin.

The Find a Car, Book and About pages are the public part of the application and are created via the Radzen visual designer. The Find button invokes a Microsoft SQL Server stored procedure that returns the cars available in the specified range

To book a car click Book in the last DataGrid column to open the booking popup, enter a name and click Book again. To view booked cars use the Schedule tab.

Technologies used:

Components used:

Get Radzen

Sign-up to download the free 30-day Radzen trial.