Setting connecting string in Blazor Telerik Report Viewer

Question

I know this should be easier than this, I was reading the Telerik Documentation since hours but without solution.

I have Blazor Server Side project. I added Telerik Report Viewer.

<ReportViewer ViewerId="rv1"
                ServiceUrl="/api/reportdesigner"
                ReportSource="@Source"
                Parameters="@ParametersOptions"
                ScaleMode="@(ScaleMode.Specific)"
                Scale="1.0" />

and here is the data that I am binding to from the component

private ReportSourceOptions Source => new()
{
    Report = SelectedReport?.Name ?? string.Empty,
    Parameters = new Dictionary<string, object>()
    {
        {  "ConnectionString" , "TelerikConnectionString" }
    }
};

private readonly ParametersOptions ParametersOptions = new()
{
    Editors = new EditorsOptions
    {
        MultiSelect = EditorType.ComboBox,
        SingleSelect = EditorType.ComboBox,
    }
};

The component show in the page, but it complains about the connection string, which I am struggling to figure out to set

here is the error message

Unable to get report parameters. An error has occurred. Unable to establish a connection to the database. Please verify that your connection string is valid. In case you use a named connection string from the application configuration file, make sure the name is correct and the connection string settings are present in the configuration file of your application.

I added the connection string in the C:\Users\USERNAME\AppData\Roaming\Telerik Reporting\WebReportDesignerSettings.json

{
    "ConnectionStrings": [
        {
            "name": "TelerikConnectionString",
            "connectionString": "Server=.\\;Initial Catalog=AdventureWorks;Integrated Security=true",
            "providerName": "System.Data.SqlClient"
        }
    ]
}

Answer 1

The json file should be present in your Blazor application. You can have a look at the example Blazor projects that come with your installation, located at (Replace R3 2022 with your release version):

C:\Program Files (x86)\Progress\Telerik Reporting R3 2022\Examples\CSharp\.NET 7\BlazorIntegrationDemo

You can specify your connection string in appsettings.json file

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

You may need to set its Build Action to Content and Copy if Newer.