using the asp.net mvc generic layout with report

[Raymond]

hi everybody,

I would like to know if it is possible to have the asp.net mvc generic layout (the one we have when creating a web app) with report, so far I just have report layout.

any suggestion, thanks

Ray

[Dimitar]

Hello Ray,

I confirm that it is possible to have the HTML5-based Report Viewers displayed as a part of the page rather than taking up the whole page. The web viewers are normal HTML elements and you can apply any styling(CSS) as you normally would to any HTML element.

    <style>
        #reportViewer1 {
            position: relative;
            width: 1000px;
            height: 700px;
        }
    </style>

    ...    

    <div id="reportViewer1">
        loading...
    </div>

    ...

    <script type="text/javascript">
        $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceUrl: "api/reports/",
                    reportSource: {
                        report: "Report Catalog.trdp",
                    }
                });
        });
    </script>

If you need assistance with setting up the report viewer, you may visit the Configuring HTML5 Report Viewer with Telerik Reporting REST Service - Telerik Reporting article.

Please let me know if you have any additional questions.

Regards,
Dimitar
Progress Telerik

[Raymond]

Hi Dimitar, thanks for your feedback, i still have issue to have the report in the app template:

when I try to include the HTML5 I have the following

thanks for the help

Ray

[Dimitar]

Hi Ray,

Judging by the embedded image, it appears as if the report viewer styles are not loaded on the page. Please try to add the following stylesheets to the page with the report viewer or on a shared page:

<!-- the required Kendo styles -->
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />

If there are issue even after adding the stylsheets, please visit the Integrating ASP.NET MVC Report Viewer With Reporting REST Service - Telerik Reporting and follow the steps listed there to set up the viewer in your application using the Visual Studio item templates.

Alternatively, you can also set it up manually - Manually Setting Up the HTML5 MVC Report Viewer - Telerik Reporting but the item templates do most of the work for you and I would recommend sticking with that approach until you get more familiar with Telerik Reporting.

 

[Raymond]

Hi Dimitar,

is using bootstrap can create such problem?

I have followed the two links you provided and no better result

[Dimitar]

Hi Ray,

If you mean the bootstrap stylesheets that come with the ASP.NET Framework MVC project template, I have used the template before and haven't had an issue so I don't think that bootstrap is responsible for the problem with the viewer.

Besides the Kendo themes, the viewer also needs to have jQuery loaded on the page for the viewer's JS code, for example:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="/api/reports/resources/js/telerikReportViewer"></script>

If you have those loaded but the report viewer still does not render correctly, please send me the project that you have created so far and I will try to make the necessary changes locally and send you the updated version.

[Raymond]

hi Dimitar,

I have created a basic project, it can be downloaded here: https://transfert.free.fr/QUFsgm5

it is a basic VS2019 ASP.NET MVC project converted to a Telerik project to which I included a Telerik Report Viewer View with Rest service and Sample Report Definition.

many thanks for your help

Ray

[Raymond]

same file but with a longer download availability : https://transfert.free.fr/Id8HAg6

 

[Dimitar]

Hi Ray,

I wasn't able to run the linked project, I am afraid. However, from what I saw, it uses an older version of the product which seems to be an internal build as I do not see it listed in the Telerik Reporting Release History.

This means that the issue could be specific to the internal. I noticed that you have started a trial with the Telerik Reporting product so my suggestion is to upgrade to the latest version - Telerik Reporting - Progress® Telerik® Reporting 2024 Q1 (18.0.24.130), and then update the scripts and stylesheet references as I have shown above.

If you have problems even with the official version, please generate and send me the following logs:

• Fiddler Jam -  First Steps with the Chrome Extension - Fiddler Jam (telerik.com)
• Trace - How to: Create and Initialize Trace Listeners - .NET Framework | Microsoft Learn

[Raymond]

Hi, 

I tried the "old" Reporting commercial version as well as the 2024 and got similar results. If the integration of the report is possible in ASP.NET MVC, will it be possible to see an example.

thanks

Ray

[Dimitar]

Hello Ray,

You may find a sample MVC project with the HTML5 MVC Report Viewer in the installation directory - C:\Program Files (x86)\Progress\Telerik Reporting 2024 Q1\Examples\CSharp\.NET Framework\AspNetMvcIntegrationDemo.

If you follow the first part of the Integrating ASP.NET MVC Report Viewer With Reporting REST Service - Telerik Reporting article, where the VS item templates are used, you will be able to integrate the report viewer in your application without writing any code manually, please do try this approach if you haven't already.

If you continue to have issues, please record and share with me a Fiddler Jam log so that I can see what are the errors - First Steps with the Chrome Extension - Fiddler Jam (telerik.com).