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.

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....

      

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

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

      

   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.

      

   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.

      

   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".

   

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.

   

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.

   

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.

   

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.

      

   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.

   

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 https://demos.telerik.com/reporting/api/data/ProductSales.min. It points to a reliable JSON data file. Leave the other options with their default values.

      

   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.

      

   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.

      

   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.

      

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

See Also

• Video tutorial 'Getting Started with the Web Report Designer: Part 1'
• Video tutorial 'Getting Started with the Web Report Designer: Part 2'
• Implement a Common Master-Detail Report Scenario
• Web Report Designer
• Setting up the Web Report Designer in .NET and .NET Core 3.1 applications
• Demo Page for Telerik Reporting
• Telerik Reporting Homepage
• Reporting Forums
• Reporting Blog
• Reporting Videos
• Reporting Roadmap
• Reporting Pricing
• Reporting Training