Migrating from EJ1 to EJ2

[Buster]

I have posted several questions regarding grid properties.  Several of the responses are for EJ2 and I am using EJ1.  I upgraded to EJ2 and now the Grid is not displaying data, instead just the words “Syncfusion.EJ2.Grids.GridBuilder”.  See below:

Is there an EJ1 to EJ2 migration guide or information on the steps or any known issues.

Current code:

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<TechForJusticeLib.Domain.SentencingCase>)ViewBag.dataSource).AllowFiltering().Columns(col =>

                          {

                              col.Field("StatuteESAS").HeaderText("Statute").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

                              col.Field("StatuteDesc").HeaderText("Statute Description").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();

 

                          }).AllowPaging(true).PageSettings(page => page.PageCount(1)).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); })

 

 

 

 

 

 

 

[Mohammed Farook J]

Hi Buster, 

 

Thanks for contacting Syncfusion support. 

 

 

We have validated the provided code and we suspect that you have missed to call the Render method. Please find the code example. 

 

  @Html.EJS().Grid("Grid").DataSource((IEnumerable<Object>)ViewBag.dataSource).AllowFiltering().Columns(col => 

 

                                  { 

 

                                      col.Field("StatuteESAS").HeaderText("Statute").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

 

                                      col.Field("StatuteDesc").HeaderText("Statute Description").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

 

 

 

                                  }).AllowPaging(true).PageSettings(page => page.PageCount(1)).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).Render() 

Please find the documentation and demo for your reference. 

Demo’s : https://aspnetmvc.syncfusion.com/Grid/DefaultFunctionalities#/material  

Getting-started :  https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/getting-started-mvc.html?syntax=razor  

Regards, 

J Mohammed Farook 

 

[Buster]

 

Now nothing appears at all….

 

Are there any other files which must be in context for this grid to display?

 

                        <div class="control-section">

                        @Html.EJS().Grid("DefaultFunctionalities").DataSource((IEnumerable<TechForJusticeLib.Domain.SentencingCase>)ViewBag.dataSource).Columns(col =>

                       {

 

                           col.Field("StatuteESAS").HeaderText("StatuteESAS").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();

                           col.Field("StatuteDesc").HeaderText("StatuteDesce").Width("150").Add();

 

                       }).AllowPaging().PageSettings(page => page.PageCount(5)).Render()

                      </div>

 

[Mohammed Farook J]

Hi Buster, 

 

We suspect that the script and CSS files are not referred in the application, please find the below step by step to include EJ2 ASP.NET MVC Grid in your project.   

1. Install Syncfusion.EJ2.MVC4/5 nuget package. Please find the screenshot for your reference. 

 

 

2. We need to add Essential JS2 Scripts and Styles to render grid control in the application. You can get Essential JS2 scripts and styles from Syncfusion.EJ2.JavaScript nuget package. Please find the screenshot for your reference. 

 

 

 

3. After installation, you can find the script and styles from below location 

Scripts installed local location : Application_name-> scripts-> ej2->ej2.min.js 

 

Styles installed local location:  Application_name->content->ej2->material.css 

   

 

4. Add script and style reference in your _Layout.cshmtl. 

  @*syncfusion script and styles*@ 

    <script src="~/Scripts/ej2/ej2.min.js"></script> 

    <link rel='nofollow' href="~/Content/ej2/material.css" rel="stylesheet" /> 

5. Add Script Manager in layout page _Layout.cshtml 

 

    @Html.EJS().ScriptManager() 

6. Add Syncfusion.EJ2 namespace reference as follows, in Web.Config  

 

<namespaces> 

        <add namespace="System.Web.Mvc" /> 

. . . 

        <add namespace="WebApplication14" /> 

        <add namespace="Syncfusion.EJ2"/> 

      </namespaces> 

 

<system.web> 

    <compilation> 

      <assemblies> 

        <add assembly="System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> 

        <add assembly="Syncfusion.EJ2, Culture=neutral "/> 

      </assemblies> 

    </compilation> 

  </system.web> 

 

Please find the code example and sample for your reference. 

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

.DataSource((IEnumerable<Object>)ViewBag.dataSource) 

.AllowFiltering() 

.FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }) 

.Columns(col => { 

       col.Field("OrderID").HeaderText("Statute").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

       col.Field("CustomerID").HeaderText("Statute Description").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

  }) 

.AllowPaging(true) 

.PageSettings(page => page.PageCount(1)) 

.Render()) 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication14738294697.zip  

Documentation : https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/getting-started-mvc.html?syntax=razor#preparing-aspnet-mvc-application  

Still if you have faced same issue, could you please confirm the following details. 

1. Did you have render both EJ1 and EJ2 Grid in your application.
2. Please share the browser developer tool console window to check if any script error thrown. To open browser developer console, press F12 and open console tab in your browser

 

 

 

Regards, 

J Mohammed Farook