Progress® Telerik® Reporting Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 20 Sep 2024 13:24 by ADMIN
jura
Created on: 30 Nov 2020 09:50
Type: Feature Request
6
Blazor ReportDesigner with js/css isolation

Hello,

I am working on Blazor reporting project and I have described the situation already in this post:

https://www.telerik.com/forums/report-viewer-and-web-designer-in-blazor#zGr6FO2mDEmkfLWIP_T_9A

Please add Blazor ReportDesigner wrapping Your HTML designer and use .NET 5 js/css isolation to manage js/css loading by the component itself and not globally.

 

Thank You

Marek Ištvánek

7 comments
ADMIN
Dimitar
Posted on: 20 Sep 2024 13:24

Hello Michal,

Thank you for sharing a working example for the latest version of the Blazor Web Report Designer!

I am not sure why the approach with the HeadContent but I agree that it is somewhat "fragile" as I have also had issues with it in more complex scenarios even though it works most of the time.

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/.
Michal
Posted on: 13 Sep 2024 14:52

Hi Dimitar,

iam sharing working setup with the "current versions" of reporting designer and viewer.

It seems more triciker and fragile construction, than it should be(maybe someone has better one):
- HeadContent its too high againts jquery, interop scripts. Docs: https://docs.telerik.com/reporting/designing-reports/report-designer-tools/web-report-designer/how-to-set-up-in-blazor-application

Magic combination, with correct order, contains 3 pieces(alter your sources/url accordingly):

@page...

    <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js" @onload="@(_=>IsLoaded1=true)"></script>
    @if (IsLoaded1 == true)
    {
        <script src="api/reportdesigner/resources/js/telerikReportViewer"></script>
        <script src="api/reportdesigner/designerresources/js/webReportDesigner/" @onload="@(_=>IsLoaded2=true)"></script>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
        <script src="_content/inCoreLibB2/js/kendo-ui-license.js"></script>

    }
    @if (IsLoaded2 == true)
    {
        <script src="_content/Telerik.WebReportDesigner.Blazor/telerikWebReportDesignerInterop.js" @onload="@(_=>IsLoaded3=true)"></script>
    }
    @if (IsLoaded3 == true)
    {
    <WebReportDesigner ....}

Do not forget to test it with browser cache chear(ctrl+f5) - The first full page load is most cheerful. Subsequent loads are mostly ok, because of the browser cache.

ADMIN
Dimitar
Posted on: 11 Sep 2024 14:04

Hi Michal,

It should be possible to load the scripts and stylesheets at page level through the HeadContent element - Control head content in ASP.NET Core Blazor apps | Microsoft Learn.

However, please keep in mind that some of those scripts, such as the telerikReportViewer, are with src that is a relative URL so you may need to edit the src string according to the URL of the page in which you load the Report Viewer/Designer.

I hope that this will help you resolve the issues. If you need further assistance, please open a support ticket and we will discuss it there.

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/.
Michal
Posted on: 05 Sep 2024 13:18

Hello,

 is there any tips, guidance or idaes, how to isolate js/css to NOT BE required as part of the app.razor (net8.0 blazor server)?

Why? Its quite huge js/css load for all users, but designer is dedicated only for few etc...

 

Especially this parts:

<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js" @onload="@(_=>IsLoaded1=true)"></script>
  <script src="api/reportdesigner/resources/js/telerikReportViewer"></script>
        <script src="api/reportdesigner/designerresources/js/webReportDesigner/"></script>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
        <script src="_content/inCoreLibB2/js/kendo-ui-license.js"></script>
        <script src="_content/Telerik.WebReportDesigner.Blazor/telerikWebReportDesignerInterop.js">....


Is it possible to put together those pieces at page level?
This idea doesnt work (giving some js errors) at page.razor level, with loading "as 2 pieces":

@page "/reporting/lrepdesign"
@* @rendermode InteractiveServer *@
@using Telerik.WebReportDesigner.Blazor

    <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js" @onload="@(_=>IsLoaded1=true)"></script>

    @if (IsLoaded1 == true)
    {
        <script src="api/reportdesigner/resources/js/telerikReportViewer"></script>
        <script src="api/reportdesigner/designerresources/js/webReportDesigner/"></script>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
        <script src="_content/inCoreLibB2/js/kendo-ui-license.js"></script>
        <script src="_content/Telerik.WebReportDesigner.Blazor/telerikWebReportDesignerInterop.js" defer @onload="@scriptLoaded"></script>
    }
    @if (IsLoaded2 == true)
    {
    <WebReportDesigner DesignerId="wrd1" Report=@RepName
                       ServiceUrl="api/reportdesigner" SkipOnboarding="true" />
    }else
    {
        <div>Is loading scripts...</div>
    }

@code {
    [SupplyParameterFromQuery]
    public string RepName { get; set; } = null;
    protected bool IsLoaded1 { get; set; } = false;
    protected bool IsLoaded2 { get; set; } = false;
    
    private async Task scriptLoaded(ProgressEventArgs e)
    {
        //IsLoaded1 = true;
        await Task.Delay(200);
        IsLoaded2 = true;
        //await Task.Delay(200);
        //StateHasChanged();
        
    }
}
ADMIN
Neli
Posted on: 09 Apr 2021 14:07

Hello Daniel,

When it comes to the Blazor Report Designer Component that will allow embedding the latest Web Report Designer into your Blazor applications using a dedicated Blazor component, we hope that we will be able to release it for R2 2021 which is scheduled for the 12th of May.

Please, let us know if you have any further questions.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Daniel
Posted on: 03 Apr 2021 08:26
Hi Neli,

can you tell us when the new Blazor component will be released? As I can see from the report designer road map, the component is not yet released:

https://www.telerik.com/support/whats-new/reporting/roadmap

Best regards,
Daniel
ADMIN
Neli
Posted on: 07 Dec 2020 09:48

Hi Marek,

Thank you for your input. The feature is approved and I changed its status to Unplanned.

When it comes to the .NET5 support, we have such a feature request which is already in progress- .Net 5.0 support of Desktop ReportViewers and Reports generation WEB service. The feature is expected to be released in the middle of January and if you vote for it, you will receive a notification about when there is a change in the status.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status