1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Essential JS 1 with Essential JS 2

Essential JS 1 with Essential JS 2

Hi, 

I have questions regarding using both of this syncfusion version:
1. I have project in ASP.NET MVC that use JS 1, and i want to use some feature in JS 2. Is it possible to use both of these version in 1 project as i already have some controls that use JS 1 ?
2. If its possible, how about the ordering of EJ and EJ2 scripts in the Layout page ?
3. If i have to upgrade from JS1 to JS2, is there any tutorial regarding this ?



5 Replies
TV Trinquier Vannick March 27, 2018 05:12 AM UTC

For addition,

4. In JS1, there are culture settings that can set the language. Is it possible also for JS2 with this culture settings?

SU Sridurgha Uthayakumaran Syncfusion Team March 28, 2018 04:44 PM UTC

Hi Trinquier, 

Thanks for your interest in Essential JS 2 components. 

Query 1:  I have project in ASP.NET MVC that use JS 1, and i want to use some feature in JS 2. Is it possible to use both of these version in 1 project as i already have some controls that use JS 1 ?  

Yes, the Essential JS 2 components are compatible with Essential JS 1. 

Query 2: If its possible, how about the ordering of EJ and EJ2 scripts in the Layout page ? 

For your convenience we have created a simple sample with Essential JS 1 and Essential JS 2 components in ASP.NET MVC 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 

Essential JS 2 NuGet packages 

The above packages itself having the client side dependency script and style files. 

Step 2: Add the namespaces and assemblies in the Views/Web.config file if it is not added. 

Web.config 
 
<system.web> 
   <compilation> 
      <assemblies> 
        <add assembly="Syncfusion.EJ2, Culture=neutral"/> 
      </assemblies> 
    </compilation> 
</system.web> 
 
<system.web.webPages.razor> 
      <pages pageBaseType="System.Web.Mvc.WebViewPage"> 
      <namespaces> 
        <add namespace="Syncfusion.EJ2"/> 
        <add namespace="Syncfusion.MVC.EJ" /> 
     </namespaces> 
    </pages> 
</system.web.webPages.razor> 


Step 3: Add the compatibility styles 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 *@ 
</head> 


Step 4: Add the script references and 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> 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @Scripts.Render("~/Scripts/jsrender.min.js") 
    @* Syncfusion Essential JS 1 Scripts *@ 
    @Scripts.Render("~/Scripts/ej/web/ej.web.all.min.js") 
    @* Syncfusion Essential JS 2 Scripts *@ 
    @Scripts.Render("~/Scripts/ej2/ej2.min.js") 
    @RenderSection("scripts", required: false) 
    <script> 
        // Set this to enable compatible between Essential JS 1 and Essential JS 2 
        $.extend(ej, Syncfusion); 
    </script>  
    @Html.EJ().ScriptManager() 
    @Html.EJS().ScripManager() 
</body> 


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

<div class="row"> 
    <h2> Essential JS 1 - TagCloud Control</h2> 
    @Html.EJ().TagCloud("tagEvents").Datasource((IEnumerable<SyncfusionWebComponents.Controllers.HomeController.WebsiteCollection>)ViewBag.datasource).TagCloudFields(tag => tag.Text("text").Url("url").Frequency("frequency")).Title("Tech Sites") 
 
    <br /><br /> 
    <h2> Essential JS 2 - Button Component </h2> 
 
    @Html.EJS().Button("element").Content("Button").Render() 
</div> 

The above sample can be download from the below link. 


Please refer the below links for the references. 

 
Query 3: If i have to upgrade from JS1 to JS2, is there any tutorial regarding this ? 
 
Currently we are working on creating API comparison documentation between Essential JS 1 and Essential JS 2 components and this is expected to be rolled out on Essential Studio Volume 2, 2018 release which will be tentatively available by May 2018. 
 
We suggest you to port the API changes manually by referring below API documentation. 
 
 
Query 4: In JS1, there are culture settings that can set the language. Is it possible also for JS2 with this culture settings? 
 
Yes, the culture settings has been provided for Essential JS 2 components. We have provided the setCulture method for changing a culture globally and also we have provided the feasibility to change a single component’s culture by using locale property.  
 
Please find the Plunker samples for loading culture data in the following links. 
 
Plunker sample for Culture change in Calender : https://plnkr.co/edit/CFtIm4JGOmDxM8FFzIzO?p=preview  
Plunker sample for Currency changes: https://plnkr.co/edit/CFtIm4JGOmDxM8FFzIzO?p=preview  
   
 
Please let us know if you have any concerns. 
 
Regards, 
Sridurgha U 
 


TV Trinquier Vannick March 29, 2018 05:31 AM UTC

Thanks a lot for your response
I am trying to do some tests with the following chart: 
https://aspnetmvc.syncfusion.com/Chart/BackToBackColumn#/material

But i am getting this error  "Uncaught TypeError: Cannot read property 'parse' of undefined"on this line: "dataSource": ej.data.DataUtil.parse.isJson([ ...)

Apparently ej.data.DataUtil is not defined on my HTML page.
Do i miss a javascript to include ? Where can I find this JS ?

Thanks a lot for your help     


GA gasda April 25, 2018 05:16 PM UTC

would be nice if the solution was here as well. I cant see that users incidents

SM Saranya Murugasamy Syncfusion Team April 26, 2018 12:06 PM UTC

Hi Gasda, 

We have logged a defect for this issue and the fix for this issue will be available in our Essential Studio Volume 2, 2018 release. 

However we have created a workaround to overcome this issue. 

While extending the ej namespace with Syncfusion, extend the data Copy also to set the compatibility between Essential JS 1 and Essential JS 2. 
   
  
_Layout.cshtml  
    
<script>  
         // Extend ej namespace with Syncfusion  
        var dataCopy = Object.assign({}, ej.data);  
        $.extend(ej, Syncfusion);  
        $.extend(ej.data, dataCopy);  
    </script>  
   
Please find the sample with the changes made in the below link. 

 
Please let us know if you have any concerns. 

Regards, 
Saranya Murugasamy 


Loader.
Up arrow icon