1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How to use EJ1 and EJ2 controls in the same ASP.NET Core project/website?

How to use EJ1 and EJ2 controls in the same ASP.NET Core project/website?

Hello

Could you please provide me with an example on how to use EJ1 and EJ2 controls in the same ASP.NET Core project and even the same website?

On a side note: is there a roadmap that shows when an individual control (or groups) will be ported from EJ1 to EJ2?

Kind regards
Phil

9 Replies
SU Sridurgha Uthayakumaran Syncfusion Team March 27, 2018 04:05 PM UTC

Hi Phil, 
 
Query 1: Could you please provide me with an example on how to use EJ1 and EJ2 controls in the same ASP.NET Core project and even the same website? 
 
We have created a simple sample with Essential JS 1 and Essential JS 2 components in ASP.NET Core application. Please find the below steps to use the Essential JS 1 and Essential JS 2 components in your application. Please find the below steps to use the Essential JS 1 and Essential JS 2 components in your application. 

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

Essential JS 1 NuGet Package 
Syncfusion.EJ 
Syncfusion.EJ.AspNet.Core  

The above mentioned Nuget packages will be available under the below link. 

 
Step 2:  Open the _ViewImports.cshtml to add the tag helpers for Syncfusion.EJ and Syncfusion.EJ2 package. 

 
@using Syncfusion.JavaScript 
 
@addTagHelper "*, Syncfusion.EJ" 
@addTagHelper "*, Syncfusion.EJ2" 

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

_Layout.cshtml 
 
<head> 
     @* Syncfusion Essential JS 1 Styles *@ 
    @* Syncfusion Essential JS 2 Styles *@ 
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" /> 
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> 
</head> 


Step 4: Add script manager of Essential JS 1 and Essential JS 2 components at the end of body tag in _Layout.cshtml file. We need to extend the ej namespace with Syncfusion to set the compatible between Essential JS 1 and Essential JS 2. 

_Layout.cshtml 
 
<body> 
   @RenderSection("scripts", required: false) 
    <script> 
             $.extend(ej, Syncfusion); 
    </script> 
     
    <ej-script-manager></ej-script-manager> 
    <ejs-scripts></ejs-scripts> 
 
</body> 


Step 5: Render the Essential JS 1 and Essential JS 2 components in the view page. 

Index.cshtml 
 
<h2> Essential JS 1 - Date Picker Component </h2> 
<ej-date-picker id="datepicker" value="@DateTime.Now"></ej-date-picker> 
 
<br /><br /> 
 
<h2> Essential JS 2 - Calender Component </h2> 
 
<ejs-calendar id="calendar"></ejs-calendar> 


The above sample can be download from the below link. 


Please refer the below links for the references. 


Query 2: is there a roadmap that shows when an individual control (or groups) will be ported from EJ1 to EJ2? 
 
Currently we have planned the below list of components for Essential Studio Volume 2, 2018 release which will be tentatively available by May 2018. 
 
  • BulletGraph
  • ColorPicker
  • GroupButton
  • HeatMap
  • RangeNavigator
  • RichTextEditor
  • Sparkline
  • TreeMap
 
We are already planning to bring most of the Essential JS 1 controls to Essential JS 2 based on customer interests. We like to get more information on list of controls you are interested and with brief summary of use cases. So that, we can log your request and give further updates whenever those are available. 

Please let us know if you have any concerns. 

Regards, 
Sridurgha U 
 


UN Unknown March 29, 2018 02:44 PM UTC

Thank you a lot for this example. That's exactly what I was hoping for!
After testing it, everything worked just fine.



Could you also give me an example on how to use
How could I serve these files locally instead of using a CDN?

JK Jayaprakash Kamaraj Syncfusion Team March 30, 2018 04:00 PM UTC

Hi Phil, 
 
Thanks for the update. 
 
We can get the scripts and styles in locally for EJ1 and EJ2 from the following installed build location. 
 
EJ1: 
 
Script Location:  
  
C:\ InstalledLocation\Syncfusion\EssentialStudio\XX.X.X.XX\JavaScript\assets\scripts\web  
  
CSS Location :  
 
C:\ InstalledLocation \Syncfusion\EssentialStudio\XX.X.X.XX\JavaScript\assets\css\web  
 
 
EJ2:  
 
C:\ InstalledLocation\Syncfusion\Essential Studio\XX.X.X.XX\Web (Essential JS 2)\JavaScript\ej2\dist 
 
C:\ InstalledLocation\Syncfusion\Essential Studio\XX.X.X.XX\Web (Essential JS 2)\JavaScript\ej2\styles\compatibility 
 
Here, XX.X.X.XX denotes the Product Version such for example, 16.1.0.32 
 
Regards, 
 
Jayaprakash K. 
 


UN Unknown April 3, 2018 10:24 AM UTC

Thank for the reply.

What would be the best approach when I want to achieve the following:

  • Deploy the ASP.NET CORE app to an external web-hoster, all Syncfusion scripts have to be in the application package (presumably in the "wwwroot" folder) and served from there.
  • I do not want to use the "~web.all.min.js" files, since they are way too big. I would like to make the included javascript code as small as possible for each request (referencing only the Syncfusion code that is needed for the controls used on the specific page).
  • Have as little effort as possible when updating to a newer Syncfusion version.

The ideal solution would be that I just have all syncfusion scripts in the wwwroot folder and that they are updated automatically when I update the syncfusion nuget packages. Similar to how it works when using ASP.NET MVC (without core).
Is something like this possible with ASP.NET CORE?


SU Sridurgha Uthayakumaran Syncfusion Team April 4, 2018 12:37 PM UTC

Hi Phil, 

Query 1: Deploy the ASP.NET CORE app to an external web-hoster, all Syncfusion scripts have to be in the application package (presumably in the "wwwroot" folder) and served from there. 
 
Currently, we don’t have support for shipping scripts and styles in wwwroot folder while installing NuGet packages. We have added this in our Essential Studio Volume 2, 2018 Wishlist which will be tentatively available by May 2018. 

Query 2: I do not want to use the "~web.all.min.js" files, since they are way too big. I would like to make the included javascript code as small as possible for each request (referencing only the Syncfusion code that is needed for the controls used on the specific page). 
 
Currently, we don’t have any immediate plan for script file customization while installing NuGet package.  However, the Javascript files can be customize by using Custom Script Generator (CSG) for Essential JS 1 components and Custom  Resource Generator (CRG) for Essential JS 2 components. Please find the links for CSG and CRG for your reference. 
 
Query 3: Have as little effort as possible when updating to a newer Syncfusion version. 
We suggest you to copy the required script files from build location or generate custom scripts from above links to update the Syncfusion version. 
Please let us know if you have any concerns. 
Regards, 
Sridurgha U 


UN Unknown April 4, 2018 03:17 PM UTC

I see, then I will generate scripts with the links you provided.

Thank you very much for the detailed answer.

SU Sridurgha Uthayakumaran Syncfusion Team April 5, 2018 11:44 AM UTC

Hi Phil, 

Thanks for your update. 

As promised, we will let you know once Essential Studio Volume 2 release has been rolled out. 

Regards, 
Sridurgha U 


PA Patryk April 5, 2019 09:26 AM UTC

If someone ever searched, why the above method does not work, then I suggest that you can not use HTTP, you only need HTTPS at the CDN.

@Syncfusion: change the documentation because you have misleading information.

MS Mydeen S N Syncfusion Team April 8, 2019 12:23 PM UTC

Hi Phil, 
 
Thanks for the  reporting the broken links in our documentation. We will change the broken links and add secure sites links  in documentation and it will be refreshed on 15th April 2019. 
 
Regards, 
Mydeen S N 
 


Loader.
Up arrow icon