Integration of EJ2 into an existing WebForm web site project

1 Reply
2 Participants

Created by
MG Marco Giorgi

Platform
JavaScript - EJ 2

Platform
JavaScript - EJ 2

Control
Chart

Created On
May 24, 2019 07:52 AM

Last Activity On
May 27, 2019 03:48 AM

Want to subscribe?
SIGN IN

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:

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 03:48 AM

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 3^rd June, 2019.

Please find the below code snippet to achieve this requirement,

Site.Manager:

// other references

<%: 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>

var chart = new ej.charts.Chart({

});

chart.appendTo('#line-container');

</script>

</asp:Content>

Screenshot:

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebSite1332618304

Kindly revert us, if you have any concerns.

Regards,

Baby.

1 Reply
2 Participants
Want to subscribe?
SIGN IN
Created by
MG Marco Giorgi
Platform
JavaScript - EJ 2
Control
Chart
Created On
May 24, 2019 07:52 AM
Last Activity On
May 27, 2019 03:48 AM