Report Viewer Not Showing

[Lance Harwell]

I have a MVC 5 asp.NET web app that is currently running EJ2 controls. I am trying to incorporate an EJ ReportViewer into the project but the control does not show up when I run. I do have a reference to http://cdn.syncfusion.com/16.3.0.29/js/common/ej.unobtrusive.min.js in my layouts view. I'm pasting the control definition below. This call has the .Render() but I've tried it without it to no avail. Any ideas?

@{

Html.EJ().ReportViewer("reportviewer")

.ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Remote)

.ReportServiceUrl(VirtualPathUtility.ToAbsolute("~/api/SSRSReport"))

.ReportServerUrl(@System.Web.Configuration.WebConfigurationManager.AppSettings["ReportServerUrl"])

.ReportPath(@System.Web.Configuration.WebConfigurationManager.AppSettings["ReportsFolder"] + "/" + @System.Web.Configuration.WebConfigurationManager.AppSettings["SummaryViewReportName"])

.ReportServiceUrl(VirtualPathUtility.ToAbsolute("~/api/SSRSReport"))

.Parameters

(param =>

{

param.Name("HospitalID").Labels(new List<string>() { "HID" }).Values(new List<string>() { "8675309" }).Add();

param.Name("StartDate").Labels(new List<string>() { "StartDate" }).Values(new List<string>() { "10/25/2018" }).Add();

param.Name("EndDate").Labels(new List<string>() { "EndDate" }).Values(new List<string>() { "11/25/2018" }).Add();

param.Name("Demo").Labels(new List<string>() { "Demo" }).Values(new List<string>() { "false" }).Add();

}

).Render();

}

[Mahendran Shanmugam]

Hi Lance Harwell, 

Thanks for your interest in Syncfusion product, 

We can able to use both EJ1 and EJ2 control in one application and please find the below steps for how to use EJ1 and EJ2 controls in MVC 5 application. 

Step 1: Install the required Essential JS 1 and Essential JS 2 NuGet packages.  

EJ1 package: https://nuget.syncfusion.com/nuget_aspnetmvc/nuget/getsyncfusionpackages/aspnetmvc. 

EJ2 package: https://nuget.syncfusion.com/nuget_aspnetcore-js2/nuget/getsyncfusionpackages/aspnetcore-js2. 

Step 2: Add the compatibility styles and script references of Essential JS 1 and Essential JS 2 components in the _Layout.cshtml file.  

Note: We need to refer the EJ2 script, theme before referring the EJ1 script 

_Layout.cshtml 

    @* Syncfusion Essential JS 2 Style *@ 

    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" /> 

    @* Syncfusion Essential JS 1 Style *@ 

    @Styles.Render("~/Content/ej/web/bootstrap-theme/ej.web.all.min.css") 

    @Scripts.Render("~/Scripts/jquery-3.2.1.min.js") 

    @Scripts.Render("~/Scripts/jsrender.min.js") 

    @* Syncfusion Essential JS 2 Script *@ 

    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> 

    @* Syncfusion Essential JS 1 Script *@ 

    @Scripts.Render("~/Scripts/ej/ej.web.all.min.js") 

    <script src="~/Scripts/ej/ej.unobtrusive.min.js"></script> 

 

Step 3: Add the Essential JS 1 and Essential JS 2 components in the view page. 

Index.cshtml 

<div> 

        @Html.EJS().Calendar("calendar").Render() 

        @Html.EJS().ScriptManager() 

    </div> 

    <div id="ControlRegion" style="height:500px ;position:absolute;"> 

        <div> 

            @(Html.EJ().ReportViewer("reportviewer").ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Remote).ReportPath("~/App_Data/Grouping Aggregate.rdl").ReportServiceUrl("/api/ReportAPI")) 

        </div> 

        @(Html.EJ().ScriptManager()) 

    </div> 

  

We have prepared the sample for your reference and it can be downloaded from below location. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCReportViewer1624493506. 

Regards, 

Mahendran S. 

[Lance Harwell]

Thank you for your response. I pulled down your example solution and it worked perfectly but I couldn't get mine to perform the same way so I decided to just rename yours and clear some things and incorporate the forms I've created since I'm not too far in yet. The report viewer still works like it should. My problem now is that I have a Syncfusion Sidebar that holds a partial view for my menu. This was working perfectly in my solution but does not work with yours. Also, anywhere in the project that has a javascript call that trys to find a Syncfusion control (i.e. var chkPrior7 = document.getElementById('chkPrior7').ej2_instances[0];) fails. Any thoughts?

[Mageshyadav M]

Hi Lance Harwell, 

  

We are unable to reproduce the issue on our side, please share your modified html files in which syncfusion controls are initialized and used along with html files containing Syncfusion script references also which will be helpful for us to validate further and provide solution. 

  

Regards, 

Mageshyadav.M 

[Lance Harwell]

I've chosen a few files that have references to controls as well as the layout page.

Attachment: MVC_8a5ea24d.zip

[Mageshyadav M]

Hi Lance,  

 

We have checked with your query on EJ2 Sidebar. Based on the provided view files, we understood that you are trying to display the Sidebar in every view of the application. To achieve your requirement, we have prepared a sample (EJ1 and EJ2 compatibility achieved) application by placing the Sidebar control in the _layout.cshtml file, to make Sidebar available in all the view pages. Also, we have rendered the EJ1 ReportViewer in a view page to exhibit the compatibility support.  

 

[_layout.cshtml]  

<!DOCTYPE html>  

<html style="position:relative;min-height:100%;">  

<head>  

    <meta charset="utf-8" />  

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <title style="position : absolute">@ViewBag.Title - My ASP.NET Application</title>  

    @Styles.Render("~/Content/css")  

    @* Syncfusion Essential JS 2 Style *@  

    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" />  

    @* Syncfusion Essential JS 1 Style *@  

    @Styles.Render("~/Content/ej/web/bootstrap-theme/ej.web.all.min.css")  

    @Scripts.Render("~/Scripts/jquery-3.2.1.min.js")  

    @Scripts.Render("~/Scripts/jsrender.min.js")  

    @* Syncfusion Essential JS 2 Script *@  

    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>  

    @* Syncfusion Essential JS 1 Script *@  

    @Scripts.Render("~/Scripts/ej/ej.web.all.min.js")  

    @using Syncfusion.MVC.EJ  

    @using Syncfusion.JavaScript  

    @using Syncfusion.EJ2  

    <script src="~/Scripts/ej/ej.unobtrusive.min.js"></script>  

</head>  

  

<body>  

    <div class="navbar navbar-inverse navbar-fixed-top">  

        <div class="container">  

            <div class="navbar-header">  

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  

                    <span class="icon-bar"></span>  

                    <span class="icon-bar"></span>  

                    <span class="icon-bar"></span>  

                </button>  

                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })  

            </div>  

            <div class="navbar-collapse collapse">  

                <ul class="nav navbar-nav">  

                    <li>@Html.ActionLink("Home", "Index", "Home")</li>  

                    <li>@Html.ActionLink("About", "About", "Home")</li>  

                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  

                    <li>@Html.ActionLink("Sales Report", "ReportViewerFeatures", "ReportViewer")</li>  

                </ul>  

            </div>  

        </div>  

    </div>  

    @*rendering the sidebar below the navigation tab*@  

    @Html.EJS().Sidebar("sidebar-menu").Width("200px").Created("onCreated").Type(Syncfusion.EJ2.Navigations.SidebarType.Push).ContentTemplate(@<div>  

        <!-- Sidebar content -->  

        <div class="title-header" style="text-align:center">  

            <ul>  

                <li class="sidebar-item" id="toggle">  

                    <span class="e-text" title="menu">Menu</span>  

                </li>  

                <li class="sidebar-item">  

                    <span class="e-text" title="home">Home</span>  

                </li>  

                <li class="sidebar-item">  

                    <span class="e-text" title="profile">Profile</span>  

                </li>  

                <li class="sidebar-item">  

                    <span class="e-text" title="info">Info</span>  

                </li>  

                <li class="sidebar-item">  

                    <span class="e-text" title="settings">Settings</span>  

                </li>  

            </ul>  

        </div>  

    </div>).Render()  

    @*By default, sidebar will take the first successor div element after the Sidebar element as it target. In this sample, we have used default behavior to show case its behavior*@  

    @*We can also add the class "e-main-content" in any div element, to specify that as the Sidebar's target element*@  

    @*Please, go through our help documentation for better understanding https://ej2.syncfusion.com/aspnetmvc/documentation/sidebar/custom-context/?no-cache=1 *@  

    @RenderBody()  

    <script>  

        var win = window;  

        win.isManualResizeTrigger = true;  

        //Initialize the Sidebar after main content has been loaded in the child view page.  

        setTimeout(() => { win.dispatchEvent(new Event('resize')); }, 500);  

        document.addEventListener('DOMContentLoaded', function () {  

            sidebarInstance = document.getElementById("sidebar-menu").ej2_instances[0];  

            sidebarInstance.show();  

        });  

   </script>  

  

    <script>  

        function onCreated() {  

            var obj = document.getElementById("sidebar-menu").ej2_instances[0];  

            obj.mediaQuery = window.matchMedia('(min-width: 600px)');  

        }  

    </script>  

    @Scripts.Render("~/bundles/bootstrap")  

    @RenderSection("scripts", required: false)  

    @RenderSection("PreScripts", required: false)  

    @Html.EJS().ScriptManager()  

    <script>  

        $.extend(ej, Syncfusion);  

    </script>  

    <style>  

        /*custom styles of Sidebar*/  

        #sidebar-menu {  

            background: #007DD1;  

        }  

  

        #innertext {  

            color: white;  

            font-size: 15px;  

            font-weight: 500;  

            margin-top: 100px;  

        }  

  

        .sidebar-item {  

            list-style-type: none;  

            color: white;  

            padding: 8px;  

            cursor: pointer;  

            font-size: 15px;  

        }  

  

            .sidebar-item:hover {  

                background: #121589;  

            }  

  

        .title-header ul {  

            padding: 0 !important;  

        }  

  

        #sidebar-menu.e-sidebar.e-left {  

            top: 50px;  

        }  

        /*end of custom styles*/  

    </style>  

</body>  

</html>  

  

 

@using Syncfusion.MVC.EJ  

@using Syncfusion.JavaScript  

@using Syncfusion.EJ2  

  

@*on rendering the body element using @RenderBody() from the _layout view, Sidebar will consider the first div as it target element*@  

  

@*Please, go through our help document for better understanding about this behaviour https://ej2.syncfusion.com/aspnetmvc/documentation/sidebar/custom-context/?no-cache=1*@  

<div>  

    <div style="margin-left:30px;">  

        @Html.EJS().Calendar("calendar").Render()  

        <br>  

        <br>  

        @(Html.EJ().ReportViewer("reportviewer").ProcessingMode(Syncfusion.JavaScript.ReportViewerEnums.ProcessingMode.Remote).ReportPath("~/App_Data/Grouping Aggregate.rdl").ReportServiceUrl("/api/ReportAPI"))  

    </div>  

</div>  

  

  

  

<style type="text/css">  

    #reportviewer {  

        width: 700px !important;  

        height: 400px !important;  

    }  

</style>  

 

Please, download the sample from the following link.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/141161/ze/MVCReportViewer1180811543   

 

Also, check out the below link, to know more about Sidebar and its features.  

 

Target: https://ej2.syncfusion.com/aspnetmvc/documentation/sidebar/custom-context/   

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/sidebar/getting-started-asp-mvc/    

  

Query:  

  

Also, anywhere in the project that has a javascript call that trys to find a Syncfusion control (i.e. var chkPrior7 = document.getElementById('chkPrior7').ej2_instances[0];) fails. Any thoughts?  

 

Solution:  

 

This issue may raise when the javascript method is called before the Syncfusion controls are initialized. So, please make sure this case in your application. Please, get back to us with more details if you still face this issue in your application. That, would help us to resolve your problem at the earliest.   

 

Please, let us know if you need any further assistance.  

 

Regards,  

Mageshyadav.M 

[Lance Harwell]

I apologize for being a pest, but I'm evidently doing something wrong. I'm including another zip with my layout view and another view (ImmediateView.cshtml) which contains 2 circular gauges. Neither of these are being shown when the page loads. Below is a snippet of the code from my controller that goes along with ImmediateView that pertains to these gauges.

            // Annotations //

            List<CircularGaugeAnnotation> capAnnotations = new List<CircularGaugeAnnotation>();

CircularGaugeAnnotation capAnnontation = new CircularGaugeAnnotation();

capAnnontation.Content = "<div><span style=font-size:14px; color:#9E9E9E; font-family:Regular>Capacity</span></div>";

capAnnontation.Radius = "30%";

capAnnontation.Angle = 0;

capAnnontation.ZIndex = "1";

capAnnotations.Add(capAnnontation);

ViewBag.CapAnnotations = capAnnotations;

//Pointers //

List<CircularGaugePointer> capPointers = new List<CircularGaugePointer>();

CircularGaugePointer capPointer = new CircularGaugePointer();

capPointer.Value = immediateViewModel.EDPctCapacity == null ? 0 : (double)immediateViewModel.EDPctCapacity.Value;

capPointer.Radius = "60%";

capPointer.Color = "#757575";

capPointer.PointerWidth = 8;

capPointer.Cap = new CircularGaugeCap { Radius = 7, Color = "#757575" };

capPointer.NeedleTail = new CircularGaugeNeedleTail { Length = "18%" };

capPointers.Add(capPointer);

ViewBag.CapPointers = capPointers;

// Ranges //

List<CircularGaugeRange> capRanges = new List<CircularGaugeRange>();

CircularGaugeRange capRange1 = new CircularGaugeRange();

capRange1.Start = 0;

capRange1.End = 80;

capRange1.Color = "#99b433";

capRanges.Add(capRange1);

CircularGaugeRange capRange2 = new CircularGaugeRange();

capRange2.Start = 80;

capRange2.End = 95;

capRange2.Color = "#ffc40d";

capRanges.Add(capRange2);

CircularGaugeRange capRange3 = new CircularGaugeRange();

capRange3.Start = 95;

capRange3.End = 120;

capRange3.Color = "#ee1111";

capRanges.Add(capRange3);

ViewBag.CapRanges = capRanges;

// Annotations //

List<CircularGaugeAnnotation> fillAnnotations = new List<CircularGaugeAnnotation>();

CircularGaugeAnnotation fillAnnontation = new CircularGaugeAnnotation();

fillAnnontation.Content = "<div><span style=font-size:14px; color:#9E9E9E; font-family:Regular>Fill Rate</span></div>";

fillAnnontation.Radius = "30%";

fillAnnontation.Angle = 0;

fillAnnontation.ZIndex = "1";

fillAnnotations.Add(fillAnnontation);

ViewBag.FillAnnotations = fillAnnotations;

//Pointers //

List<CircularGaugePointer> fillPointers = new List<CircularGaugePointer>();

CircularGaugePointer fillPointer = new CircularGaugePointer();

fillPointer.Value = immediateViewModel.FillRate == null ? 0 : (double)immediateViewModel.FillRate.Value;

fillPointer.Radius = "60%";

fillPointer.Color = "#757575";

fillPointer.PointerWidth = 8;

fillPointer.Cap = new CircularGaugeCap { Radius = 7, Color = "#757575" };

fillPointer.NeedleTail = new CircularGaugeNeedleTail { Length = "18%" };

fillPointers.Add(fillPointer);

ViewBag.FillPointers = fillPointers;

// Ranges //

List<CircularGaugeRange> fillRanges = new List<CircularGaugeRange>();

CircularGaugeRange fillRange1 = new CircularGaugeRange();

fillRange1.Start = -15;

fillRange1.End = 15;

fillRange1.Color = "#1ba1e2";

fillRanges.Add(fillRange1);

ViewBag.FillRanges = fillRanges;

Attachment: Views_e9421af.zip

[Mageshyadav M]

Hi Lance, 

 

In order to have quick resolution and resolving problems on your side to use both ej2 and ej1 controls, we have created a support incident under your account to track further status of your query and schedule a web meeting. Please log on to our support website to check for further updates.    

     

http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac 

 

Regards, 

Mageshyadav.M