Compatibility with Syncfusion ASP.NET Core (Essential JS 1)

31 Mar 202211 minutes to read

This documentation explains how to render Essential JS 1 and Essential JS 2 Syncfusion controls in a single page.

Adding application

You can create Essential JS 1 and Essential JS 2 controls using the following links:

Getting started for EJ2 ASP.NET Core control

Getting started for EJ1 ASP.NET Core control

Style compatibility

Add compatibility styles using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file. Essential JS 1 and Essential JS 2 controls have compatibility styles that do not affect each other.

<head>
    ...
    @* Syncfusion Essential JS 1 Styles *@
    <link href="https://cdn.syncfusion.com/20.1.55/js/web/material/ej.web.all.compatibility.min.css"  rel="stylesheet"/>
    @* Syncfusion Essential JS 2 Styles *@
    <link href="https://cdn.syncfusion.com/ej2/20.1.55/styles/compatibility/material.css" rel="stylesheet" />
</head>

Script compatibility

Add scripts for Essential JS 1 and Essential JS 2 using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as shown in the following code.

<head>
    ...
    @* Syncfusion Essential JS 1 Scripts *@
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="https://cdn.syncfusion.com/20.1.55/js/web/ej.web.all.min.js"></script>

    @* Syncfusion Essential JS 2 Scripts *@
    <script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.js"></script>
</head>

If you do not add ej1 script before ej2 script, it will throw script error.

Adding compatibility

To add compatibility, use the following code in the end of <body> in ~/Pages/Shared/_Layout.cshtml file. Since EJ1 and EJ2 controls have same library names to perform different actions, conflicts may occur when you refer both the controls in same application. To overcome this, extend these libraries in ej namespace.

<body>
...
    <script>
        var dataCopy = Object.assign({}, ej.data);
        $.extend(ej, Syncfusion);
        $.extend(ej.data, dataCopy);
    </script>
</body>

Adding script manager

Open ~/Pages/Shared/_Layout.cshtml file and register the script manager for both Essential JS 1 and Essential JS 2 at the end of <body> in the ASP.NET Core application as follows.

<body>
    ...
    <ej-script-manager></ej-script-manager>
    <ejs-scripts></ejs-scripts>
</body>

The following code illustrates the final view of layout page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - SyncfusionEJ1andEJ2</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/SyncfusionEJ1andEJ2.styles.css" asp-append-version="true" />
    @* Syncfusion Essential JS 1 Styles *@
    <link href="https://cdn.syncfusion.com/19.4.0.55/js/web/material/ej.web.all.compatibility.min.css"  rel="stylesheet"/>
    @* Syncfusion Essential JS 2 Styles *@
    <link href="https://cdn.syncfusion.com/ej2/19.4.55/styles/compatibility/material.css" rel="stylesheet" />

    @* Syncfusion Essential JS 1 Scripts *@
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="https://cdn.syncfusion.com/19.4.0.55/js/web/ej.web.all.min.js"></script>

    @* Syncfusion Essential JS 2 Scripts *@
    <script src="https://cdn.syncfusion.com/ej2/19.4.55/dist/ej2.min.js"></script>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">SyncfusionEJ1andEJ2</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2022 - SyncfusionEJ1andEJ2 - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
    <script>
        var dataCopy = Object.assign({}, ej.data);
        $.extend(ej, Syncfusion);
        $.extend(ej.data, dataCopy);
    </script>
    <ej-script-manager></ej-script-manager>
    <ejs-scripts></ejs-scripts>
</body>
</html>

Declare Essential JS 1 and Essential JS 2 controls

Essential JS 1 and Essential JS 2 controls have already been initialized via getting started. If you want to change control, you can initialize using the following code.

<h2> Essential JS 1 - Grid Control</h2>

<ej-grid id="FlatGrid" allow-paging="true">
    <e-datamanager url="https://services.odata.org/v4/northwind/northwind.svc/Orders" adaptor="ODataV4Adaptor"></e-datamanager>
    <e-columns>
        <e-column field="OrderID" header-text="Order ID" text-align="Right" width="70"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>
        <e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="75"></e-column>
        <e-column field="Freight" header-text="Freight" text-align="Right" format="{0:C2}" width="75"></e-column>
        <e-column field="ShipCity" header-text="Ship City" width="110"></e-column>
    </e-columns>
</ej-grid>

<h2> Essential JS 2 - Grid Control</h2>

<ejs-grid id="Grid" allowPaging="true">
    <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders" adaptor="ODataV4Adaptor" crossdomain="true"></e-data-manager>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

View Sample in GitHub.