1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Problems with IE

Problems with IE

I integrated a grid Essential JS2 in my application Essential JS1.
That works in all browsers except IE.
My page _layout.cshtml:
@using Gxp_Front.Includes;
@using Gxp_Front.Helpers;

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Scripts.Render("~/bundles/modern")
    @Scripts.Render("~/Scripts/promise.js?v=" + Constants.versionFile)
    @Styles.Render("~/Content/bootstrap.min.css?v=" + Constants.versionFile)
    @Styles.Render("~/Content/ej/web/bootstrap-theme/ej.web.all.min.css?v=" + Constants.versionFile)
    @Styles.Render("https://cdn.syncfusion.com/16.1.0.24/js/web/bootstrap-theme/ej.web.all.compatibility.min.css")
    @Styles.Render("~/Content/ej2/compatibility/material.css?v=" + Constants.versionFile)
    @Styles.Render("~/Content/gxp/app.css?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/jquery-2.1.4.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/jquery.easing.1.3.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/globalize.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/jsrender.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/ej/ej.web.all.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/mustache.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/handlebars.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/jquery.validate.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/ej/ej.unobtrusive.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/handlebarsHelpers.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/respond.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/umd/popper.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/bootstrap.min.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/Modal/createOrUpdate.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/Modal/updateElement.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/Modal/createElement.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/Modal/readElement.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/global.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/grid.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/menu.js?v=" + Constants.versionFile)
    @Scripts.Render("~/Scripts/ej2/ej2.min.js")
    @RenderSection("scripts", required: false)
    <script>
        // Extend ej namespace with Syncfusion
        var dataCopy = Object.assign({}, ej.data);
        $.extend(ej, Syncfusion);
        $.extend(ej.data, dataCopy);
    </script>
    <style>
        .e-resizable {
            resize: both;
            overflow: auto;
            border: 1px solid red;
            padding: 10px;
            height: 300px;
            min-height: 250px;
            min-width: 250px;
        }

        .e-text {
            font-family: Helvetica, sans-serif;
            font-size: 14px;
        }
    </style>
</head>
<body>
    @RenderPage("_Header.cshtml")
    <div class="container-fluid no-gutters">
        <div class="wrapper row">
            @RenderPage("_Menu.cshtml")
            <div class="colGrid col">
                <div id="content">
                    @if (ViewBag.MessageError != null)
                    {
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            @ViewBag.MessageError
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    }
                    @RenderBody()
                    @*@if(ViewBag.ProjectContentList != null)
                        {
                            @RenderPage("~/Views/Application/modalMultiProject.cshtml")
                        }*@
                    @RenderPage("_Footer.cshtml")
                </div>
            </div>
        </div>
    </div>
    <div id="coockieNames">
        <span id="coockiePageSize" hidden="hidden">@(Constants.CoockiesNamePageSize + "-" + SessionHelper.Get<string>("nameSchema"))</span>
    </div>
    @Html.EJ().ScriptManager()
    @Html.EJS().ScriptManager()

    <script type="text/javascript">
        var urlConstructModalCreate = '@Url.Action("ConstructModalCreate", "ModalGrid")';
        var urlAuditXml = '@Url.Action("XmlAudit", "Audit")';
        var urlLien = '@Url.Action("GetLienModalGrid", "ModalGrid")';
        var urlGetElementMultiple = '@Url.Action("GetElementMultiple", "ModalGrid")';
        var urlDisconnect = '@Url.Action("Disconnect", "Home")';
        var urlGetElementCompo = '@Url.Action("GetElementCompo", "ModalGrid")';
        var urlDeleteElement = '@Url.Action("DeleteElement", "Application")';
        var urlGetPermissions = '@Url.Action("GetPermissions", "User")';
        var urlGetBinaryFile = '@Url.Action("GetBinaryFile", "Application")';
        var urlGetElementNonCompo = '@Url.Action("GetElementNonCompo", "ModalGrid")';
        var urlGrid = '@Url.Action("Grid", "Application")';
        var urlGetMultiProject = '@Url.Action("GetMultiProject", "Application")';
        var urlPostCreateUpdateModal = '@Url.Action("PostCreateUpdateModal", "ModalGrid")';
    $(document).ready(function () {
        $("#buttonDetail").hide();
        $("#buttonDelete").hide();
        $("#buttonLink").hide();
        if ('@ViewBag.ProjectContentList'.length > 0) {
            $('#btnChangeProject').prop('disabled', true);
            $('#selectProject').change(function () {
                $('#btnChangeProject').prop('disabled', false);
            });
            $('#modalMultiProject').modal('show');
        }
    });
    </script>
</body>
</html>







Attachment: sample_e9da935f.7z

2 Replies
BB Bassem Ben ALI June 1, 2018 09:12 AM UTC

I find that this line causes problems with IE:
 <script>
        // Extend ej namespace with Syncfusion
        var dataCopy = Object.assign({}, ej.data); //this ligne it can't find assign() methode in object
        $.extend(ej, Syncfusion);
        $.extend(ej.data, dataCopy);
    </script>

MF Mohammed Farook J Syncfusion Team June 4, 2018 06:57 AM UTC

Hi Bassem, 

Thanks for contacting Syncfusion support. 

We have validated the reported issue, this issue occurred due to ‘Object. assign Javascript method is not supported IE browser’. So could you please ej.base.extend instead of this. Please find the code example. 

[Layout.html] 

    <script> 
        // Extend ej namespace with Syncfusion 
        //var dataCopy = Object.assign({}, ej.data); // use ej.base.extend instead of Object.assign 
        var dataCopy = ej.base.extend({}, ej.data); 
        $.extend(ej, Syncfusion); 
        $.extend(ej.data, dataCopy); 
    </script>  
    @Html.EJ().ScriptManager() 
    @Html.EJS().ScriptManager() 


Also Promise object is also not supported in IE browser. But EJ DataManager requires Promise object in global environment, so you need to include the ‘polyfill.min’ to add Promise polyfill in your HTML page.  Please find the code example and sample for your reference. 


<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @* Syncfusion Essential JS 1 Styles *@ 
    @* Syncfusion Essential JS 2 Styles *@ 
    <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script> 
</head> 




Please find the general solution to this issue. 


Please let us know if you have any concern about this. 

Regards, 
J Mohammed Farook 


Loader.
Up arrow icon