1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Integration of EJ2 into an existing WebForm web site project

Integration of EJ2 into an existing WebForm web site project

I'm developing new pages inside an old WebForm web site project.
I want to start using EJ2 components for them, in particular charts.

But I don't understand how should I have to integrate the necessary javascript files to make it work.
In the old days we used to put the script like the following:
    <script src="../Scripts/Syncfusion-16.3.0.29/common/ej.core.min.js"></script>
    <script src="../Scripts/Syncfusion-16.3.0.29/common/ej.data.min.js"></script>
    <script src="../Scripts/Syncfusion-16.3.0.29/common/ej.scroller.min.js"></script>

or using the bundling:
            bundles.Add(new ScriptBundle("~/bundles/myscripts").Include(
                            "~/Scripts/abc.js",
                            "~/Scripts/efg.js"));
But now, following your guide, I'm not able to include the js files needed.

I can't clone or integrate your quickstart project into my already existing project, because I want to keep it clean, and I don't like even to copy 300MB of files into the project, because I will use 2~3MB in the end, minified JS + compiled CSS...
So I think I can avoid the NPM, right?

I've tried to add systemjs.config.js file but I can't understand how to correctly configure it, and I get always "ej is not defined" error.

System.config({
    paths: {
        'syncfusion:': '/_assets/vendors/Syncfusion/@syncfusion',
    },
    map: {
        app: 'app',

        //Syncfusion packages mapping
        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
        ,
    },
    packages: {
        'app': { main: 'app', defaultExtension: 'js' }
    }
});

For example why there is the last line 'app':... I'm not using Angular/React/Vue/ES6, I'm using only plain old javascript in an HTML page.

Maybe using WebPack could be simpler?






1 Reply
BP Baby Palanidurai Syncfusion Team May 27, 2019 08:48 AM UTC

Hi Marco, 

Greetings from Syncfusion. 

We have analyzed your query. And we have prepared a sample based on your requirement. To render EJ2 charts, you need to refer scripts in the site manager. There is no need to config the system.cofig as like the configuration you have done. We have already change the documentation from our side. It will be refreshed online on 3rd June, 2019.  

Please find the below code snippet to achieve this requirement, 
Site.Manager: 

<head runat="server"> 
     // other references 
   <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 
    <link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
    <%: Scripts.Render("https://cdn.syncfusion.com/ej2/dist/ej2.min.js")%> 
</head> 

Chart.aspx: 

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeFile="Chart.aspx.cs" Inherits="Chart" %> 
 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <div> 
        <div id="line-container"></div> 
    </div> 
    <script> 
        var chart = new ej.charts.Chart({ 
        }); 
        chart.appendTo('#line-container'); 
    </script> 
</asp:Content> 


Screenshot: 
 

Kindly revert us, if you have any concerns. 

Regards, 
Baby. 


Loader.
Up arrow icon