New to Telerik Reporting? Download free 30-day trial

Configure Web Report Designer and Create a Basic Report

This is a step-by-step tutorial that shows how to integrate the Web Report Designer in .NET 6 ASP.NET Core application in Visual Studio 2022.

  • First, you will create a Web Application and add Telerik Web Report Designer through its Visual Studio Item Template.
  • Next, you'll create and style a new report.
  • Then, you will add a remote DataSource and connect it to a new Graph in the report.
  • At the end you will have a web application with embedded Telerik Web Report Designer with the default SampleReport.trdp and the newly created ProductSales.trdp reports in its storage that you may preview and edit.

Preview of the base report created from scratch in the web report designer.

The entire process is described in the YouTube video tutorial Getting Started with the Web Report Designer: Part 1.

Setting up the Web Report Designer in .NET 6

Let's create an ASP.NET Core application in Visual Studio and embed the Telerik Web Report Designer in it:

  1. Open Visual Studio 2022 and create a new project through the project template ASP.NET Core Web App. Name the project, for example, Telerik.WRD.GettingStarted and select .NET 6.0 as a Target Framework.
  2. Add the Web Designer to the project:

    1. Right-click on the project and select Add > New Item....

      Open the menu for adding new item to your project through Visual Studio item template.

    2. You may search for telerik reporting to list the available Reporting item templates. Add Telerik Web Report Designer HTML5 Page 2024 Q1. The version may vary, depending on the last Reporting version installed.

    3. Name the new page webReportDesigner.html (this is the default name).

      Searcing for and adding Web Report Desiger page 'webReportDesigner.html' through the Visual Studio item template.

    4. Build the project when prompted by Visual Studio.

  3. Configure the Web Report Designer:

    1. In the popped-up Add new .NET Core Web Report Designer wizard, select Create new REST service as we don't have an existing one.

      Create new Web Report Desiger REST Service in the project through the wizard's 'Configure web report designer engine' page.

    2. On the next step the wizard will ask for the initial report to load. Select the Sample report definition option to create a new sample report if you don't have any.

      Create sample report definition through the wizard's 'Configure report' page.

    3. When you click Finish you should see a status page confirming that everything was set up correctly.

  4. (optional) Open the file launchSetting.json in the folder Properties and add the next line, setting the opening page to the "profiles" > "Telerik.WRD.GettingStarted" object. Note that the name of the project and the web page may vary:

    "launchUrl": "webReportDesigner.html".

    The 'launchSetting.json' file in project folder 'Properties' with added 'launchUrl'.

  5. Run the project. If everything is fine, you should see the web page with the designer with the sample report opened, and the onboarding guide to walk you through the main tools in the designer.

    We recommend getting familiar with the Web Report Designer by clicking on the Next button in the guide. You may skip the guide at any step through the button End Tour. Pay attention to the Search functionality of the designer that lets you locate any report item, section, or property easily.

    The web report designer onboarding guide on the last step describing the global Search box.

Creating a New Report

Our next goal is to create a brand new report with the just configured Web Report Designer:

  1. Go to the main toolbar Menu and select New Report. The Create Report dialog opens and lets you:

    1. Enter the File Name. Let's name the report ProductSales.
    2. Select the Type. Leave the Type to be TRDP standing for Telerik Report Definition Packed, the recommended Declarative Report Definition.
    3. Enter Location. Type Demo to place the report in the Demo subfolder.
    4. Click Save to apply the settings.

    The 'Create Report' dialog of the web designer with the above settings for our new report.

  2. The new empty report should open in the designer with its default Page Header, Detail, and Page Footer sections. Let's delete the page sections by selecting them and pressing the Delete key from the keyboard.

  3. Next, we want to add a Report Header. Press Ctrl+F to focus the Search box, type Report Header, and press Enter key to focus the report section in the Components menu. Click the item to add the section to the report.

    Searching for the 'Report Header' and locating it in the web designer's 'Components' menu.

  4. Let's add the company logo to the report.

    1. We need to add a PictureBox to the Report Header. You may search for the report item, drag it to the Report Header, and adjust its size and position as needed.
    2. To upload the logo, search for the Value property in the PictureBox, and click on the icon beside it. It opens the Select File... dialog, which represents the Assets Manager. The latter contains report assets such as images, external stylesheets, etc.

      The 'Select file...' dialog of the web designer opened when adding a value for the PictureBox.

    3. Select the Images folder and click the Upload button to upload the image. Click on the Browse button to find the image on your system and open it. Add the selected image by clicking on the Upload button. Now the image is in the Assets Manager and you may click Save. The value should be populated and the image should be displayed in the PictureBox.

  5. Add title to the report. You may use the TextBox report item.

    1. Search in the global search box of the designer and drag the item from the Components menu to the Report Header.
    2. You may change the text inline. Double-click on the item to enter it and type Sales by Category.
    3. Apply Styles by selecting the TextBox, searching for Style, and finding the appropriate Font styles. Let's use the default Font "Arial", with Size 22pt, bolded, centered, and aligned to the middle.
    4. Position and realign the TextBox so that the content fits and looks beautiful.

    The TextBox 'Sales by Category' styled and aligned in the web designer.

  6. Our next step would be to add a DataSource component to the Report. Let it be the WebServiceDataSource fetching data from a remote source.

    1. Search for the component and add it to the report. It opens the Configure Web Service DataSource wizard.
    2. For ServiceUrl we will add the known URL to our demo site It points to a reliable JSON data file. Leave the other options with their default values.

      The first page of the 'Configure WebServiceDataSource' wizard in the web designer.

    3. Skip the next page, where you may add request parameters, as we don't have any.

    4. Skip also the third page that asks whether in design-time you would like to use real or mocked data. We will use real data (the default setting).
    5. Preview the data on the next page and click Finish.

      The last page of the 'Configure WebServiceDataSource' wizard in the web designer shows the 'Preview data source results'.

    6. The wizard closes and in the designer's Explorer tab you should see the new WebServiceDataSource component with its data fields listed.

  7. Next, lets add the Graph item that is going to show the sales data.

    1. Search for Column and drag the Column chart from the Explorer menu to the report Detail section. This will open a chart configurator to the right pane.
    2. Select the WebServiceDataSource from the dropdown of the Graph DataSource property. The fields will be listed.

      Configuring the Column Chart in the web report designer.

    3. Drag the ProductCategory field to the Categories.

    4. For the Values property use the LineTotal field.
    5. Click on Create to render the chart with real data and show it in the report.
    6. Finally, style the column graph:

      • Find and remove the Legend by unchecking its Style > Visible checkbox.
      • Enter the Titles section, select the graph title, and uncheck the Visible checkbox in the Style section from the opened Edit item dialog.

      Styling the Column Chart in the web report designer.

  8. Preview the pixel-perfect report document by clicking on the designer Preview button at the top right corner.

See Also

In this article