Compatibility with Syncfusion® JavaScript (Essential® JS 1)

7 May 20256 minutes to read

This article provides a step-by-step introduction to configure the Essential® JS 1 and Essential® JS 2 JavaScript controls in a same web page.

Prerequisites

To work with the Essential® JS 1 and the Essential® JS 2 controls compatibility in JavaScript (ES5), the below mentioned System requirements are necessary,

Creating JavaScript application with Syncfusion® JavaScript (Essential® JS 2) control

  1. Create a JavaScript (ES5) application with the help of the given Essential® JS 2 Getting Started Documentation.

  2. Now, the Syncfusion® (Essential® JS 2) JavaScript Button control rendered successfully in the web page.

Adding Syncfusion® JavaScript (Essential® JS 1) control in the application

  1. Before adding the Essential® JS 1 control in the application, you should change the Essential® JS 2 compatibility styles in the application.

    The compatibility styles of Essential® JS 1 and Essential® JS 2 must be added in the application to prevent the UI conflicts between the Essential® JS 1 and Essential® JS 2 controls.

    Replace the style file in the resources folder from the below location.

    Syntax:

    Styles: **(installed location)**\Syncfusion\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\styles\compatibility\material.css

    Example:

    Styles: C:\Program Files (x86)\Syncfusion\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2\styles\compatibility\material.css

    If the CDN link is used in the application, then replace it with below link.

    Styles: https://cdn.syncfusion.com/ej2/styles/compatibility/material.css

  2. Now, add the Essential® JS 1 script and compatibility styles with its dependencies in the resources/ej1 location. You can get the Essential® JS 1 scripts and styles from the below installed location.

    Syntax:

    Script:
    **(installed location)**\Syncfusion\{RELEASE_VERSION}\Web (Essential JS 1)\JavaScript\assets\scripts\web\ej.web.all.min.js

    Styles:
    **(installed location)**\Syncfusion\{RELEASE_VERSION}\Web (Essential JS 1)\JavaScript\assets\css\web\default-theme\ej.web.all.compatibility.min

    Example:

    Script:
    C:\Program Files (x86)\Syncfusion\16.3.0.17\Web (Essential JS 1)\JavaScript\assets\scripts\web\ej.web.all.min.js

    Styles:
    C:\Program Files (x86)\Syncfusion\16.3.0.17\Web (Essential JS 1)\JavaScript\assets\css\web\default-theme\ej.web.all.compatibility.min

  3. Add the Essential® JS 1 file references in the index.html with the HTML Button element for rendering Essential® JS 1 Button control.

    The Essential® JS 1 scripts must be added before the Essential® JS 2 script reference.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

        <head>
            <title>Essential JS 2 - Essential JS 1</title>

            <!-- Essential JS 1 default theme -->
            <link href="resources/ej1/default-theme/ej.web.all.compatibility.min.css" rel="stylesheet" type="text/css" />
            <!-- Essential JS 2 material theme -->
            <link href="resources/material.css" rel="stylesheet" type="text/css" />

            <!-- Essential JS 1 scripts -->
            <script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>
            <script src="resources/ej1/ej.web.all.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 script -->
            <script src="resources/ej2.min.js" type="text/javascript"></script>
        </head>

        <body>
            <div style="margin: 50px;">
                <!-- Add HTML Button element for Essential JS 2 -->
                <button id="btn2">Essential JS 2</button>
            </div>

            <div style="margin: 50px;">
                <!-- Add HTML Button element for Essential JS 1 -->
                <button id="btn1">Essential JS 1</button>
            </div>
        </body>

    </html>
  1. Initialize the Essential® JS 1 and Essential® JS 2 Button control inside the <script> element in ~/quickstart/index.html file.
    <script>
        // Extend ej namespace with Syncfusion
        $.extend(ej, Syncfusion);

        // Initialize Essential JS 2 JavaScript Button control
        var button = new ej.buttons.Button({
            isPrimary: true
        });
        button.appendTo('#btn2');

        // Initialize Essential JS 1 JavaScript Button control
        $("#btn1").ejButton();
    </script>
> The `ej` namespace should be extend with `Syncfusion` before initializing the Essential<sup style="font-size:70%">&reg;</sup> JS 1 and Essential<sup style="font-size:70%">&reg;</sup> JS 2 controls.

  1. Run ~/quickstart/index.html in the web browser and the Essential® JS 1 and Essential® JS 2 Button controls will be rendered in the same web page.

    #ej1-ej2-button