We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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:
    <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?






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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon