Declined
Last Updated: 11 Mar 2024 12:23 by ADMIN
Thanh
Created on: 22 Aug 2021 04:45
Type: Bug Report
1
Telerik Reporting Blazor Interop not found

I followed How to set up in Blazor application | Telerik Reporting

All done! But when it run i got an error "telerikWebReportDesignerInterop.js 404"

<script src="_content/telerik.webreportdesigner.blazor/telerikWebReportDesignerInterop.js" defer></script>

and in console show:

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'Gyr8E4g_PwQHf7G2UKY2h3obMpujPfFp2x9i7dkB4oQ'.
      Microsoft.JSInterop.JSException: Could not find 'telerikWebReportDesignerInterop.createWebReportDesignerWidget' ('telerikWebReportDesignerInterop' was undefined).
Error: Could not find 'telerikWebReportDesignerInterop.createWebReportDesignerWidget' ('telerikWebReportDesignerInterop' was undefined).
    at https://localhost:5001/_framework/blazor.server.js:1:67713
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:5001/_framework/blazor.server.js:1:67673)
    at v (https://localhost:5001/_framework/blazor.server.js:1:69415)
    at https://localhost:5001/_framework/blazor.server.js:1:70361
    at new Promise (<anonymous>)
    at e.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:70334)
    at https://localhost:5001/_framework/blazor.server.js:1:26441
    at Array.forEach (<anonymous>)
    at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:26411)
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Telerik Reporting 15.1.21.616

<PackageReference Include="Telerik.Reporting.Services.AspNetCore" Version="15.1.21.616" />
<PackageReference Include="Telerik.Reporting.OpenXmlRendering" Version="15.1.21.616" />
<PackageReference Include="Telerik.ReportViewer.Blazor" Version="15.1.21.616" />
<PackageReference Include="Telerik.WebReportDesigner.Blazor" Version="15.1.21.616" />
<PackageReference Include="Telerik.WebReportDesigner.Services" Version="15.1.21.616" />

Startup.cs

 

namespace CSharp.Net5.BlazorIntegrationDemo
{
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.DependencyInjection.Extensions;
    using Microsoft.Extensions.Hosting;
    using System;
    using Telerik.Reporting.Cache.File;
    using Telerik.Reporting.Services;
    using Telerik.WebReportDesigner.Services;

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            this.Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();

            services.AddRazorPages()
                .AddNewtonsoftJson();
            services.AddServerSideBlazor();

            // Configure dependencies for ReportsController.
            services.TryAddSingleton<IReportServiceConfiguration>(sp =>
                new ReportServiceConfiguration
                {
                    ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
                    HostAppId = "Net5BlazorDemo",
                    Storage = new FileStorage(),
                    ReportSourceResolver = new UriReportSourceResolver(System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples")),
                });

            // Configure dependencies for ReportDesignerController.
            services.TryAddSingleton<IReportDesignerServiceConfiguration>(sp => new ReportDesignerServiceConfiguration
            {
                DefinitionStorage = new FileDefinitionStorage(
                    System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples")),
                SettingsStorage = new FileSettingsStorage(
                    System.IO.Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting")),
                ResourceStorage = new ResourceStorage(
                    System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "..", "..", "..", "..", "Report Designer", "Examples", "Resources"))
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }

        /// <summary>
        /// Loads a reporting configuration from a specific JSON-based configuration file.
        /// </summary>
        /// <param name="environment">The current web hosting environment used to obtain the content root path</param>
        /// <returns>IConfiguration instance used to initialize the Reporting engine</returns>
        static IConfiguration ResolveSpecificReportingConfiguration(IWebHostEnvironment environment)
        {
            // If a specific configuration needs to be passed to the reporting engine, add it through a new IConfiguration instance.
            var reportingConfigFileName = System.IO.Path.Combine(environment.ContentRootPath, "reportingAppSettings.json");
            return new ConfigurationBuilder()
                .AddJsonFile(reportingConfigFileName, true)
                .Build();
        }
    }
}

WebReportDesignerDemo.razor


@page "/webreportdesigner"
@using Telerik.WebReportDesigner.Blazor

<style>
    #wrd1 {
        position: relative;
        height: 880px;
        padding-right: 50px;
    }
</style>

@* Create the WebReportDesignerWidget *@

<p>This Web Report Designer instance works with reports hosted locally using the Reporting REST service. For more information, visit the <a target="_blank" href="https://docs.telerik.com/reporting/web-report-designer">Web Report Designer</a> article.</p>
<WebReportDesigner DesignerId="wrd1"
                   ServiceUrl="/api/reportdesigner"
                   Report="Dashboard.trdp"
                   ToolboxArea="new ToolboxAreaOptions() { Layout = ToolboxAreaLayout.List }"
                   PropertiesArea="new PropertiesAreaOptions() { Layout = PropertiesAreaLayout.Categorized }" />

2 comments
ADMIN
Dimitar
Posted on: 11 Mar 2024 12:23

Hello,

Issues with the interop files of the Blazor Report Viewer/Designer are usually caused by incorrect or missing URLs when referencing said scripts in the Blazor application.

For guidance on which scripts must be referenced, where, and how, we recommend visiting the Adding the Blazor Web Report Designer component article.

Let us know if we can help with anything else.

Regards,
Dimitar
Progress Telerik

Stay tuned by visiting our roadmap and feedback portal pages, enjoy a smooth take-off with our Getting Started resources, or visit the free self-paced technical training at https://learn.telerik.com/.
Kevin
Posted on: 04 Mar 2024 21:48
Same here. No one cared to reply to this.