ej2 aspmvc ej1compatibility

Compatibilidade com Syncfusion Essential JS 1 e Essential JS 2 ASP.Net MVC

Esta demonstração tem como objetivo evitar problemas de compatibilidade com EJ1 e EJ2.

Solução

As configurações abaixo ajudam você a renderizar os componentes EJ1 e EJ2 Syncfusion em um aplicativo ASP.NET MVC de página única.

Adicionando aplicativo

Você pode criar controles Essential JS 1 e Essential JS 2 usando os links de introdução abaixo

• Introdução ao controle EJ2 ASPMVC
• Introdução ao controle EJ1 ASPMVC

Compatibilidade de estilo

Adicione estilos de compatibilidade. Temos estilos de compatibilidade Essential JS 1 e Essential JS 2 que não afetarão um ao outro.

">

 
    @* 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")

Compatibilidade de scripts

Adicione scripts para Essential JS 1 e Essential JS 2 conforme abaixo.

@* Syncfusion Essential JS 2 Scripts *@ ">

 @* Syncfusion Essential JS 1 Scripts *@




@* Syncfusion Essential JS 2 Scripts *@

Nota: É necessário adicionar o script ej1 antes dos scripts ej2 ou ocorrerá um erro de script.

Adicionando compatibilidade

Para atender a esse requisito, você precisa usar o código abaixo na página _Layout.cshtml . Porque EJ1 e EJ2 possuem os mesmos nomes de biblioteca para realizar as diferentes ações. Portanto, podem ocorrer conflitos quando referimos esses dois controles na mesma aplicação. Para superar isso, precisamos estender essas bibliotecas no namespace ej.

Adicionando Gerenciador de Scripts

Defina o gerenciador de scripts para Essential JS 1 e Essential JS 2

 @Html.EJ().ScriptManager()
@Html.EJS().ScriptManager()

Finalmente, a página Layout se parece com:

@* 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) @Html.EJ().ScriptManager() @Html.EJS().ScriptManager()

@RenderBody()

">

 
    
    
    @* 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)

    
     
    @Html.EJ().ScriptManager()
    @Html.EJS().ScriptManager()

    

        @RenderBody()
    

Declarar controle JS 1 essencial e controle JS 2 essencial

Você pode inicializar os controles Essential JS 1 e Essential JS 2 usando os primeiros passos. No trecho abaixo, inicializamos os controles de UI Eessential JS 1 e Essential JS 2 ASP.NET MVC.

)ViewBag.gridData) .AllowPaging().PageSettings(page => page.PageSize(4)) .Columns(col => { col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add(); col.Field("CustomerID").HeaderText("CustomerID").Width(80).Add(); col.Field("ShipName").HeaderText("ShipName").Width(100).Add(); col.Field("ShipCity").HeaderText("ShipCity").Width(100).Add(); col.Field("Freight").Format("{0:c3}").HeaderText("Freight").Width(80).TextAlign(TextAlign.Right).Add(); }) )

Essential JS 2 - Grid Component

@Html.EJS().Grid("Grid").DataSource((IEnumerable