Integration of EJ2 into an existing WebForm web site project

Thread ID:	Created:	Updated:	Platform:	Replies:
144826	May 24,2019 12:52 PM UTC	May 27,2019 08:48 AM UTC	JavaScript - EJ 2	1

Subscribe to this post

Tags: Chart

Marco Giorgi

Asked On May 24, 2019 12:52 PM UTC

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?

Reply | Reply with quote

Baby Palanidurai [Syncfusion]

Replied On 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 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.

Reply | Reply with quote

Integration of EJ2 into an existing WebForm web site project

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US