We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Unable to get ASP .Net Core Report Designer to run

I followed the sample project here:https://reports.syncfusion.com/documentation/aspnet-core/report-designer/add-web-report-designer-to-an-aspnet-core-application/
When run, I receive the following error in devtools (Chrome):TypeError: $(...).ejReportDesigner is not a function
I created the project multiple times, both with and without selecting 'Configure https' when project is created. Is there a step missing in the documentation?

3 Replies

VS Vinoth Srinivasan Syncfusion Team July 18, 2019 04:49 AM

Hi Paul, 
 
Sorry for the inconvenience. 
 
We must add the CSS and script files under “environment” tag in “head” and “body” respectively as shown in the below code snippet. 
 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>@ViewData["Title"] - ReportDesignerSample</title> 
 
    <environment include="Development"> 
        <link rel="stylesheet" rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.css" /> 
        <link rel="stylesheet" rel='nofollow' href="~/css/site.css" /> 
        <link rel='nofollow' href="https://cdn.syncfusion.com/4.1.0.25/js/reports/flat-azure/ej.reports.all.min.css" rel="stylesheet" /> 
        <link rel='nofollow' href="https://cdn.syncfusion.com/4.1.0.25/js/reports/flat-azure/ej.reportdesigner.min.css" rel="stylesheet" /> 
        <link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" /> 
        <link rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" /> 
    </environment> 
    <environment exclude="Development"> 
        <link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" 
              asp-fallback-rel='nofollow' href="~/lib/bootstrap/dist/css/bootstrap.min.css" 
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" 
              crossorigin="anonymous" 
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" /> 
    </environment> 
</head> 
<body> 
    <header> 
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> 
            <div class="container"> 
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ReportDesignerSample</a> 
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" 
                        aria-expanded="false" aria-label="Toggle navigation"> 
                    <span class="navbar-toggler-icon"></span> 
                </button> 
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> 
                    <ul class="navbar-nav flex-grow-1"> 
                        <li class="nav-item"> 
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a> 
                        </li> 
                        <li class="nav-item"> 
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> 
                        </li> 
                    </ul> 
                </div> 
            </div> 
        </nav> 
    </header> 
    <div class="container"> 
        <partial name="_CookieConsentPartial" /> 
        <main role="main" class="pb-3"> 
            @RenderBody() 
        </main> 
    </div> 
 
    <footer class="border-top footer text-muted"> 
        <div class="container"> 
            &copy; 2019 - ReportDesignerSample - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> 
        </div> 
    </footer> 
 
    <environment include="Development"> 
        <script src="~/lib/jquery/dist/jquery.js"></script> 
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script> 
        <script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script> 
        <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script> 
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.common.min.js"></script> 
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.widgets.min.js"></script> 
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.report-designer-widgets.min.js"></script> 
        <!--Chart component script added before the Report Designer and viewer script to render report with chart report item--> 
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.chart.min.js"></script> 
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/ej.report-viewer.min.js" type="text/javascript"></script> 
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/ej.report-designer.min.js" type="text/javascript"></script> 
    </environment> 
    <environment exclude="Development"> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" 
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js" 
                asp-fallback-test="window.jQuery" 
                crossorigin="anonymous" 
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="> 
        </script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js" 
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" 
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" 
                crossorigin="anonymous" 
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4="> 
        </script> 
    </environment> 
    <script src="~/js/site.js" asp-append-version="true"></script> 
 
    @RenderSection("Scripts", required: false) 
    <!-- Syncfusion Reporting ScriptManager --> 
   <sf-script-manager></sf-script-manager> 
</body> 
</html> 
 
 
We will consider changing this in our online help documentation and prepared a simple sample for your reference. It can be downloaded from below link. 
 
Regards, 
Vinoth S. 



ID Isheanesu Doro September 17, 2019 12:54 AM

Hello, I have tried this in an simple Html page but still throws the 'is not a function error'. Below is code I am using.

<!DOCTYPE html>
<html>
     <head>
    <environment include="Development">
        <link rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/4.1.0.25/js/reports/flat-azure/ej.reports.all.min.css" rel="stylesheet" />
        <link rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/4.1.0.25/js/reports/flat-azure/ej.reportdesigner.min.css" rel="stylesheet" />
        <link rel='nofollow' rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
        <link rel='nofollow' rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
    </environment>
    </head>

    <body>
    <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>

    <environment include="Development">
        <script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script>
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.common.min.js"></script>
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.widgets.min.js"></script>
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.report-designer-widgets.min.js"></script>
        <!--Chart component script added before the Report Designer and viewer script to render report with chart report item-->
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.chart.min.js"></script>
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/ej.report-viewer.min.js" type="text/javascript"></script>
        <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/ej.report-designer.min.js" type="text/javascript"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
    </environment>
        <script type="text/javascript">
        $(function () {
            $("#viewer").ejReportViewer();
        });
    </script>
      <sf-script-manager></sf-script-manager>
    </body>
</html>


VS Vinoth Srinivasan Syncfusion Team September 17, 2019 04:15 AM

Hi Isheanesu, 

We have checked your shared code snippet in that you have specified the scripts correctly and the mentioned issue occurs when scripts override. So, could you please share your issue reproducible sample to validate the mentioned problem at our end. 

Regards, 
Vinoth S. 


Loader.
Live Chat Icon For mobile
Up arrow icon