{"id":23061163,"url":"https://github.com/syncfusionexamples/ej2-aspmvc-ej1compatibility","last_synced_at":"2026-05-04T07:33:30.599Z","repository":{"id":98095037,"uuid":"155840212","full_name":"SyncfusionExamples/ej2-aspmvc-ej1compatibility","owner":"SyncfusionExamples","description":"This demo purpose to avoid Essential JS 1 \u0026 Essential JS 2 compatibility issues in ASP.NET MVC","archived":false,"fork":false,"pushed_at":"2025-09-13T02:46:52.000Z","size":8365,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-13T04:23:06.897Z","etag":null,"topics":["asp","asp-net-mvc","aspnet","csharp","mvc","mvc-application","syncfusion"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-11-02T09:00:53.000Z","updated_at":"2025-09-13T02:46:55.000Z","dependencies_parsed_at":"2024-08-15T19:44:48.413Z","dependency_job_id":null,"html_url":"https://github.com/SyncfusionExamples/ej2-aspmvc-ej1compatibility","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SyncfusionExamples/ej2-aspmvc-ej1compatibility","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-aspmvc-ej1compatibility","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-aspmvc-ej1compatibility/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-aspmvc-ej1compatibility/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-aspmvc-ej1compatibility/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/ej2-aspmvc-ej1compatibility/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fej2-aspmvc-ej1compatibility/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32599106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"online","status_checked_at":"2026-05-04T02:00:06.625Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asp","asp-net-mvc","aspnet","csharp","mvc","mvc-application","syncfusion"],"created_at":"2024-12-16T03:16:41.601Z","updated_at":"2026-05-04T07:33:30.585Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Syncfusion Essential JS 1 and Essential JS 2 ASP.Net MVC Compatibility\n\nThis demo purpose to avoid EJ1 \u0026 EJ2 compatibility issues.\n\n# Solution \n\nThe below setps help you to render EJ1 and EJ2 Syncfusion components in a single page ASP.NET MVC Application.\n\n## Adding Application\t\n\nYou can create Essential JS 1 and Essential JS 2 controls using below getting started links\n\n* [Getting started for EJ2 ASPMVC control](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/getting-started-mvc.html) \n* [Getting started for EJ1 ASPMVC control](https://help.syncfusion.com/aspnetmvc/grid/getting-started)\n\n## Style Compatibility\n\nAdd compatibility styles. We have Essential JS 1 and Essential JS 2 compatibility style which won’t affect each other.\n\n```\n\u003chead\u003e\n    @* Syncfusion Essential JS 1 Styles *@\n    @Styles.Render(\"https://cdn.syncfusion.com/16.1.0.24/js/web/bootstrap-theme/ej.web.all.compatibility.min.css\")\n\n    @* Syncfusion Essential JS 2 Styles *@\n    @Styles.Render(\"https://cdn.syncfusion.com/ej2/styles/compatibility/material.css\")\n\u003c/head\u003e\n```\n\n## Scripts Compatibility\n\nAdd scripts for Essential JS 1 and Essential JS 2 as below.\n\n```\n@* Syncfusion Essential JS 1 Scripts *@\n\u003cscript \nsrc=\"http://cdn.syncfusion.com/js/assets/external/jquery3.3.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"http://cdn.syncfusion.com/js/assets/external/jsrender.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"http://cdn.syncfusion.com/16.3.0.21/js/web/ej.web.all.min.js\"\u003e\u003c/script\u003e\n\n@* Syncfusion Essential JS 2 Scripts *@\n\u003cscript src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\"\u003e\u003c/script\u003e\n```\n\nNote: Need to add ej1 script before ej2 scripts or else it will throw script error.\n\n## Adding Compatibility\n\nTo 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.\n\n```\n\u003cscript\u003e\n    var dataCopy = Object.assign({}, ej.data);\n    $.extend(ej, Syncfusion);\n    $.extend(ej.data, dataCopy);\n\u003c/script\u003e\n```\n\n## Adding Script Manager \n\nDefine Script manager for both Essential JS 1 and Essential JS 2\n\n```\n@Html.EJ().ScriptManager()\n@Html.EJS().ScriptManager()\n```\n\nFinally, The Layout page looks like:\n```\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    @* Syncfusion Essential JS 1 Styles *@\n    @Styles.Render(\"http://cdn.syncfusion.com/16.3.0.21/js/web/flat-azure/ej.web.all.min.css\")\n    @* Syncfusion Essential JS 2 Styles *@\n    @Styles.Render(\"https://cdn.syncfusion.com/ej2/styles/compatibility/material.css\")\n\u003c/head\u003e\n\n\u003cbody\u003e\n    @Scripts.Render(\"~/bundles/jquery\")\n    @Scripts.Render(\"~/bundles/bootstrap\")\n    @Scripts.Render(\"~/Scripts/jsrender.min.js\")\n    @* Syncfusion Essential JS 1 Scripts *@\n    @Scripts.Render(\"~/Scripts/ej/web/ej.web.all.min.js\")\n    @* Syncfusion Essential JS 2 Scripts *@\n    @Scripts.Render(\"~/Scripts/ej2/ej2.min.js\")\n    @RenderSection(\"scripts\", required: false)\n\n    \u003cscript\u003e\n        var dataCopy = Object.assign({}, ej.data);\n        $.extend(ej, Syncfusion);\n        $.extend(ej.data, dataCopy);\n    \u003c/script\u003e\n     \n    @Html.EJ().ScriptManager()\n    @Html.EJS().ScriptManager()\n\n    \u003cdiv class=\"container body-content\"\u003e\n        @RenderBody()\n    \u003c/div\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Declare Essential JS 1 Control \u0026 Essential JS 2 Control\n\nYou may initialized Essential JS 1 \u0026 Essential JS 2 controls using getting started. The below snippet we have initialized Eessential JS 1 \u0026 Essential JS 2 ASP.NET MVC UI Controls.\n\n```\n\u003ch2\u003e Essential JS 1 - Grid Control\u003c/h2\u003e\n\n    @(Html.EJ().Grid\u003cobject\u003e(\"FlatGrid\")\n                            .Datasource((IEnumerable\u003cobject\u003e)ViewBag.gridData)\n                            .AllowPaging().PageSettings(page =\u003e page.PageSize(4))\n                            .Columns(col =\u003e\n\n                            {\n                                col.Field(\"OrderID\").HeaderText(\"Order ID\").TextAlign(TextAlign.Right).Width(75).Add();\n\n                                col.Field(\"CustomerID\").HeaderText(\"CustomerID\").Width(80).Add();\n                               col.Field(\"ShipName\").HeaderText(\"ShipName\").Width(100).Add();\n                                col.Field(\"ShipCity\").HeaderText(\"ShipCity\").Width(100).Add();\n\n                                col.Field(\"Freight\").Format(\"{0:c3}\").HeaderText(\"Freight\").Width(80).TextAlign(TextAlign.Right).Add();\n                            })\n    )\n\n\n\u003ch2\u003e Essential JS 2 - Grid Component \u003c/h2\u003e\n   @Html.EJS().Grid(\"Grid\").DataSource((IEnumerable\u003cobject\u003e)ViewBag.gridData).Columns(col =\u003e\n    {     col.Field(\"OrderID\").HeaderText(\"OrderID\").Width(\"120\").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();\n\ncol.Field(\"CustomerID\").HeaderText(\"Customer Name\").Width(\"150\").Add();\n        col.Field(\"OrderDate\").HeaderText(\"OrderDate\").Width(\"130\").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format(\"yMd\").Add();\n\ncol.Field(\"ShipCountry\").HeaderText(\"Ship Country\").Width(\"120\").Add();\n\n    }).AllowPaging().PageSettings(page =\u003e page.PageSize(4).PageSizes(true)).Render()\n\n```\n\n\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fej2-aspmvc-ej1compatibility","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fej2-aspmvc-ej1compatibility","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fej2-aspmvc-ej1compatibility/lists"}