https://github.com/syncfusionexamples/ej2-aspmvc-ej1compatibility

This demo purpose to avoid Essential JS 1 & Essential JS 2 compatibility issues in ASP.NET MVC
https://github.com/syncfusionexamples/ej2-aspmvc-ej1compatibility

asp asp-net-mvc aspnet csharp mvc mvc-application syncfusion

Last synced: about 1 month ago
JSON representation

This demo purpose to avoid Essential JS 1 & Essential JS 2 compatibility issues in ASP.NET MVC

• Host: GitHub
• URL: https://github.com/syncfusionexamples/ej2-aspmvc-ej1compatibility
• Owner: SyncfusionExamples
• Created: 2018-11-02T09:00:53.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-08-15T17:34:14.000Z (5 months ago)
• Last Synced: 2024-08-15T19:50:06.063Z (5 months ago)
• Topics: asp, asp-net-mvc, aspnet, csharp, mvc, mvc-application, syncfusion
• Language: JavaScript
• Homepage:
• Size: 7.98 MB
• Stars: 1
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Syncfusion Essential JS 1 and Essential JS 2 ASP.Net MVC Compatibility

This demo purpose to avoid EJ1 & EJ2 compatibility issues.

# Solution 

The below setps help you to render EJ1 and EJ2 Syncfusion components in a single page ASP.NET MVC Application.

## Adding Application	

You can create Essential JS 1 and Essential JS 2 controls using below getting started links

* [Getting started for EJ2 ASPMVC control](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/getting-started-mvc.html) 

* [Getting started for EJ1 ASPMVC control](https://help.syncfusion.com/aspnetmvc/grid/getting-started)

## Style Compatibility

Add compatibility styles. We have Essential JS 1 and Essential JS 2 compatibility style which won’t affect each other.

```

    @* Syncfusion Essential JS 1 Styles *@

    @Styles.Render("https://cdn.syncfusion.com/16.1.0.24/js/web/bootstrap-theme/ej.web.all.compatibility.min.css")

    @* Syncfusion Essential JS 2 Styles *@

    @Styles.Render("https://cdn.syncfusion.com/ej2/styles/compatibility/material.css")

```

## Scripts Compatibility

Add scripts for Essential JS 1 and Essential JS 2 as below.

```

@* Syncfusion Essential JS 1 Scripts *@

@* Syncfusion Essential JS 2 Scripts *@

```

Note: Need to add ej1 script before ej2 scripts or else it will throw script error.

## Adding Compatibility

To achieve this requirement, you need to use the below code in `_Layout.cshtml` page. Because EJ1 and EJ2 has same library names to perform the different actions. So conflicts may occur when we refer this both controls in same application. To overcome this we need to extend this libraries in ej namespace.

```

    var dataCopy = Object.assign({}, ej.data);

    $.extend(ej, Syncfusion);

    $.extend(ej.data, dataCopy);

```

## Adding Script Manager 

Define Script manager for both Essential JS 1 and Essential JS 2

```

@Html.EJ().ScriptManager()

@Html.EJS().ScriptManager()

```

Finally, The Layout page looks like:

```

    

    

    @* Syncfusion Essential JS 1 Styles *@

    @Styles.Render("http://cdn.syncfusion.com/16.3.0.21/js/web/flat-azure/ej.web.all.min.css")

    @* Syncfusion Essential JS 2 Styles *@

    @Styles.Render("https://cdn.syncfusion.com/ej2/styles/compatibility/material.css")

    @Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")

    @Scripts.Render("~/Scripts/jsrender.min.js")

    @* Syncfusion Essential JS 1 Scripts *@

    @Scripts.Render("~/Scripts/ej/web/ej.web.all.min.js")

    @* Syncfusion Essential JS 2 Scripts *@

    @Scripts.Render("~/Scripts/ej2/ej2.min.js")

    @RenderSection("scripts", required: false)

    

        var dataCopy = Object.assign({}, ej.data);

        $.extend(ej, Syncfusion);

        $.extend(ej.data, dataCopy);

    

     

    @Html.EJ().ScriptManager()

    @Html.EJS().ScriptManager()

    


        @RenderBody()