1. Home
  2. Forum
  3. Dashboard Platform
  4. Embed a syncfusion dashboard as a dll in Essential JS 2 for ASP.NET Core MVC application (syncfusion dashboard)

Embed a syncfusion dashboard as a dll in Essential JS 2 for ASP.NET Core MVC application (syncfusion dashboard)

Hi,
i want to embed a syncfusion dashboard as a dll in Essential JS 2 for ASP.NET Core MVC application. Please guide on how to do it because i have not found any sample solution or documentation on how to a dashboard in Essential JS 2 for ASP.NET Core MVC App.
Many thanks
Simon

6 Replies
BR Balaji Ravichandran Syncfusion Team July 28, 2020 10:44 AM UTC

Hi Simon, 

Thanks for Contacting Syncfusion Support. 

To embed the Dashboard into your ASP .NET Core 2.0 application follow the steps in the below link 

Also to embed the Dashboard Service as DLL into your application please follow the below link 

Please let us know if you need further assistance. 

Regards 
Balaji Ravichandran. 


SB Simon Bunya July 28, 2020 11:20 AM UTC

Hi, 
Thanks for your reply,
Unfortunately, i have tried this and it doesn't work for ej2, its for ej1. The <ej-script-manager></ej-script-manager> conflicts with the one in ej2.

i want the one that works with ej2 in essential js2 for ASP.NET Core MVC App.

Many thanks

Simon

RN Renuka N Syncfusion Team July 29, 2020 07:20 AM UTC

Hi  Simon,  

Please follow the below steps to render the Dashboard Viewer and EJ2 Component in the same page in your ASP .NET Core application  


 
  1. Install the Syncfusion.EJ.DashboardViewer.ASPNet.Core for Dashboard from the nuget feed
  
  1. Also install the Syncfusion.EJ.ASPNet.Core and Syncfusion.EJ2.ASP.Net.core
  
  1. Now Add the Tag helper in .cshtml page
@using Syncfusion.Dashboard.JavaScript  
@using Syncfusion.Dashboard.JavaScript.Models  
@addTagHelper"*, Syncfusion.EJ.DashboardViewer.AspNet.Core"  
@addTagHelper *, Syncfusion.EJ2  
  
  1. Now refer the needed script and themes in your cshtml page
<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <title>AspNetCore - DashboardViewer</title>  
    <link rel="stylesheet" rel='nofollow' href="~/dashboard/themes/default-theme/bootstrap.min.css" />  
    <link rel="stylesheet" rel='nofollow' href="~/dashboard/themes/default-theme/ej.dashboardViewer.all.min.css"/>  
    <link rel="stylesheet"rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" />  
    <script src="~/dashboard/scripts/jquery-1.10.2.min.js"></script>  
    <script src="~/dashboard/scripts/jquery.easing.1.3.min.js"></script>  
    <script src="~/dashboard/scripts/ej.dashboardViewer.all.min.js"></script>  
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>  
</head>  
<body style="height:100%;width:100%;padding:0;">  
   <div class="container body-content" style="height:100%;width:100%;">  
    @RenderBody()  
   <ej-script-manager></ej-script-manager>  
    <ejs-scripts></ejs-scripts>  
    </div>  
    @RenderSection("scripts", required: false)  
</body>  
</html>  
  
  
  Note :  
  1. To avoid any conflicts maintain the above order of the scripts referred.
  2. Also to avoid any css conflicts use the EJ2 compatibility css (https://cdn.syncfusion.com/ej2/styles/compatibility/material.css) as in the above code snippet.
  3. Now in your index page you can render the EJ2 and Dashboard Control in the same page
<style>  
   body, html, #dashboard {  
height: 100%;  
width: 100%;  
   }  
</style>  
<div style="height:50px;width:100%;text-align:center;font-size:20px">EJ2 Date Picker Component</div>  
<ejs-calendar id="calendar"></ejs-calendar>  
<div style="height:50px;width:100%;text-align:center;font-size:20px">Dashboard</div>  
  
    
  1. In the above code snippet service URL and dashboard path used is only for example. Please use your hosted service URL and Dashboard path
  2. Also in the above code we have rendered the EJ2 Calendar and Dashboard in the same page. You can refer the below EJ2 ASP .NET core documentation and render the EJ2 component you need
  
  
We have also created the sample for reference. Please find the sample in the below link   

Please let us know, if you have any queries. 

Regards, 
Renuka N. 


SB Simon Bunya July 29, 2020 10:11 AM UTC

Hi Renuka,
Thanks for your reply. I have followed your steps unfortunately, the dashboards are still not loading yet the calendar controls loads well. It complains about "ejDashboardViewer is not a function" .

Please find below the _layout and the index.cshtml page im using.






index.cshtml page



_layout.cshtml page





Many thanks 
Simon








SB Simon Bunya July 29, 2020 10:17 AM UTC

Hi Renuka N,

If possible, can we have a zoom meeting I show you where my problem is.

Thanks 

RN Renuka N Syncfusion Team July 30, 2020 09:54 AM UTC

Hi Simon, 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  
 
Thanks, 
Renuka N. 


Loader.
Up arrow icon