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
close icon
If you became a customer of the Syncfusion Reporting Platform or the Report Viewer, Report Designer, or Report Writer components before October 2019 and have questions related to those products, you can request support through our forum system. However, please note that this support system is only for existing customers who are still using the Syncfusion Reporting Platform or its components and not for new customers looking for reporting products from Syncfusion.

For new customers or those with general reporting questions, we recommend contacting our support team at https://support.boldreports.com/, which is a separate brand created by Syncfusion for its reporting solutions. Our team will be happy to assist you with any questions you may have.

Thank you for choosing Syncfusion for your reporting needs.

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 09:49 AM UTC

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 05:54 AM UTC

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 09:15 AM UTC

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