How to render EJ2-Grid as HTML in ASP.NET MVC Grid

[Tony Waterman]

Hi,

I'm currently working on an EJ JavaScript project (version 14 or so, I believe). I find that the JS is very slow when I try to render a new grid. The problem is that I have to make a large ajax call which returns about 2MB of JSON (I've attached a sample). I find that there is no way I can run this using the JS version of syncfusion. Well, I can but it takes up to five minutes to finish so I'm trying to upgrade to the MVC version of EJ2. I believe this will allow me to do most of the processing on the server, rather than on the client. But how to get the rendered html over an ajax call after the server has finished creating data? I see that the first, EJ, version of the GridPropertiesBuilder had a ToHTMLString method which I might have been able to use, but there doesn't seem to be anything similar in the newer EJ2 version of the syncfusion.EJ2 assembly. What would be the new, supported way of getting html over ajax and displaying it?

Attachment: test_old_5cf424c8.zip

[Venkatesh Ayothi Raman]

Hi Tony, 

Thanks for using Syncfusion products. 

Yes, we can render a EJ2-Grid as HTML using JSON string which is from AJAX POST request. Please refer to the following code example, 

[index.html page] 

<div id="jsonGrid"></div> 

 

<script> 

var jsonString = { 

        "allowPaging": true, 

        "columns": [ 

          { 

              "field": "OrderID", 

              "headerText": "Order ID", 

              "textAlign": "Right", 

              "width": "120" 

          }, 

          { 

              "field": "CustomerID", 

              "headerText": "Customer Name", 

              "width": "150" 

          }, 

          { 

              "field": "OrderDate", 

              "format": "yMd", 

              "headerText": "Order Date", 

              "textAlign": "Right", 

              "width": "130" 

          }, 

          { 

              "field": "Freight", 

              "format": "C2", 

              "headerText": "Freight", 

              "textAlign": "Right", 

              "width": "120" 

          }, 

          { 

              "field": "ShippedDate", 

              "format": "yMd", 

              "headerText": "Shipped Date", 

              "width": "140" 

          }, 

          { 

              "field": "ShipCountry", 

              "headerText": "Ship Country", 

              "width": "150" 

          } 

        ], 

        "dataSource": ej.data.DataUtil.parse.isJson([ 

        { 

            "OrderID": 10001, 

            "CustomerID": "ALFKI", 

            "EmployeeID": 1, 

            "Freight": 2.3, 

            "ShipCity": "Berlin", 

            "OrderDate": "1991-05-15T00:00:00", 

            "ShipName": "Simons bistro", 

            "ShipCountry": "Denmark", 

            "ShippedDate": "1996-07-16T00:00:00", 

            "ShipAddress": "Kirchgasse 6" 

        }, 

              . .  . 

]), 

        "frozenColumns": 0.0, 

        "frozenRows": 0.0, 

        "pageSettings": { 

            "currentPage": 1.0, 

            "pageCount": 5.0, 

            "pageSize": 12.0 

        }, 

        "selectedRowIndex": -1.0 

    }; 

var GridModel = new ej.grids.Grid(jsonString); 

    GridModel.appendTo("#jsonGrid"); 

 

</script> 

 

 For you scenario, you can get the EJ2-Grid JSON object from AJAX success function and you can append into the Grid element. Please refer to the following Help documentation for more information, 

Help documentation: https://ej2.syncfusion.com/16.1.32/aspnet/documentation/grid/getting-started-core.html?syntax=tag 

Online demo: https://aspnetmvc.syncfusion.com/Grid/DefaultFunctionalities#/material 

Regards, 

Venkatesh Ayothiraman.