Sample Data Cannot be Displayed on the UI

[Azman]

Hi. I am done setting up Telerik Rest Service and CORS to be embedded in Angular. However, some several issues pop up when i follow the documentation below which is the step to integrate the sample report in to Telerik :

 

https://docs.telerik.com/reporting/integrating-the-report 

 

1. There is no option to navigate to ASP .NET Web Application (.NET Framework Visual C#). Hence, I select ASP .NET Core Web App only. Btw, I am using Microsoft Visual Studio 2022.

2. When I proceed to the next step, there is no option on "Existing report definition" to configure the report source. Only Sample report definition is appear.

3. There is no web.config file in the solution which is necessary to added named connection string to the report. 

 

The final result on the angular is shown in the attachment.

Can someone help me to guide me on how to solve this issue? 

Thank you!

 

[Dimitar]

Hello Azman,

Let me first add some comments on the issues that you have encountered with adding the report viewer page and the reporting service through the item template.

Regarding the first point, the ASP.NET Web Application project template is not provided by Telerik Reporting, it should be built into VS as far as I know. If this option is missing in your VS 2022, you may try reinstalling it with more development environments support, although, it does not make sense that you would have the .NET Core option installed and .NET Web Application not. For reference, this project template is available in my VS 2022, see attached screenshot.

Regarding the second point, the reason that only the sample definition option is available is that you are probably creating a new reporting service instead of using an existing one, thus the wizard expects you to not have existing report definitions in the project. You can simply move your existing report files(if you have such) to the Reports that will be created by the wizard and where the SampleReport is located.

Regarding the last point, our engine works both with XML-based configurations such as Web.config and also with JSON-based configuration such as the appsettings.json configuration file that .NET Core applications usually come up with. In JSON configurations, the format of the connection strings element is usually similar to:

  "ConnectionStrings": {
    "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": {
      "connectionString": "Data Source=(local)\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=SSPI",
      "providerName": "System.Data.SqlClient"
    }
  }

For more information on setting up the reporting service in .NET Core and the connection strings, please see the How to set up in .NET 5 and .NET Core 3.1 applications article. I have attached a short video that goes over the guide and demonstrates how you may set up the service, please check it out.

Regarding the error from the screenshot, there are a couple of possible reasons for this error. It seems like the report viewer is trying to open the ReportBook.trbp file, is this file present in your folder where the reports are stored in your .NET Core project? The file not being there is one of the possible reasons for this error. Other than that, also make sure that the UriReportSourceResolver that the report service utilizes to load TRDP/TRBP/TRDX reports is provided with the correct path to your reports folder.

For more information, please see the How to Set ReportSource for Report Viewers article.

Also, since you use Angular, I recommend checking out the How to Use Angular Report Viewer with Angular CLI article if you haven't already.

It is also important to note that Telerik Reporting provides demo projects with the installation of the product which can be found in the installation directory of the product, inside the Examples folder, you may use them as a reference when building yours.

To sum up, to fix the error with the report viewer make sure that the ReportBook.trbp file exist inside the reports folder and that the folder path provided to the UriReportSourceResolver is correct. Since you have probably installed the SampleReport.trdp file, you may first change the Angular Report Viewer to display that report and if there are still errors, then there is a problem with the path most likely.

Regards,
Dimitar
Progress Telerik

[Azman]

Hi Dimitar,

Thank you for the thorough explanation and guidance. The previous error had been fixed!

However,  another error arise on the angular page like shown in the attachment:

Unable to get report parameters.
An error has occurred.
A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 26 - Error Locating Server/Instance Specified)

Do you have any suggestion for this new issue? Thank you in advance!

[Dimitar]

Are you able to preview the same report, with the same connection string in any of the designers?

If yes, please make sure that the connection string is correctly written in your application's configuration(appsettings.json). The connection string should specify the providerName and the connectionString. I would also recommend having a look at the following links regarding this error:

• provider: SQL Network Interfaces, error: 26 - Error Locating Server/Instance Specified
• METHODS TO RESOLVE SQL SERVER ERROR 26
• sql network interfaces error 26 - error locating server/instance specified

Also, since your backend application is .NET Core, you may need to specifically register a provider factory for that provider - How to register a DbProviderFactory in a .NET Core project.

If none of the above helps, try to generate a trace log while trying to load the report viewer page - Troubleshooting reporting implementation into ASP.NET Core application. You may attach the generated .log file in this thread.