How to dynamically update Grid?

[Pylori]

Hi,

I would like to create the following grid.

  Data: server push only
  Number of records: 100 to 200 (The number of records scarcely increases or decreases after the first display.)
  Update interval: 300ms to 1000ms
  Row to be updated at once: 10 to 150
  Layout: The size of the grid is fixed and there is a scroll bar

For example, it is a grid at the following URL.
http://demo.grapecity.com/c1/aspnet/LearnMvcClient/C1FlexGrid/DynamicUpdates

I have tried various things so far.
  1. I called the controller's method frequently using UrlAdaptor.
  2. I put the grid on the partial view.
  3. I tried updating with updateRecord of ejGrid using SignalR.

As a result, the scroll bar did not move smoothly, and the page freezed in some cases.
Is there a good way to update the cell frequently with little burden on the GUI like the grid of the above URL?

Regards,
Pylori.

[Seeni Sakthi Kumar Seeni Raj]

Hi Pylori,

 

Thanks for contacting Syncfusion Support.

 

Since ej1 Grid is using a non-native Scroller, it will take time to load/refresh the content for every single seconds. In your case, refreshing of the scroller is required frequently where the Grid freezes. We cannot overcome this behavior in EJ1 grid.

 

Ej2 Grid is rendered using native scroller, so the Grid will be responsive in all the case as expected. Please refer to the following documents and showcase demo of the ej2 Grid.

 

https://www.syncfusion.com/products/aspnetmvc/data-grid

https://ej2.syncfusion.com/16.1.37/documentation/grid/?lang=typescript

https://ej2.syncfusion.com/16.1.37/demos/#/material/grid/default.html

 

Essential JS 2 is fully re-written to be modular, responsive and lightweight.

 

We suggest you look into our following product page for more details.

https://www.syncfusion.com/products/essential-js2

 

Demo page for ej2 Grid

http://ej2.syncfusion.com/15.4.17/demos/#/material/grid/default.html

 

Regards,

Seeni Sakthi Kumar S.

 

[Pylori]

Hi,

  

Thank you for your answer.

I saw the following grid.

I was convinced that what I want to do is feasible. It is a wonderful grid.

https://www.syncfusion.com/products/aspnetmvc/data-grid

I thought that I wanted to use this grid, but I have something unclear about ej2.

I have already installed "Enterprise Edition - Binaries / EXE (754 MB)" at the following site.

https://www.syncfusion.com/support/directtrac/downloads/16_1_0_24?file=studio

(Since it is also used in WPF application development, it was installed from before)

I installed "WEB (Essential JS 2)" at the time of installation, but Syncfusion.EJ2 was not found in Visual Studio "Add Reference".

As I found out the following documents, I made it according to the procedure.

https://ej2.syncfusion.com/16.1.24/aspnet/documentation/getting-started/asp-mvc.html?syntax=tag

However, the calendar was not displayed as below.

After installing "Enterprise Edition - Binaries / EXE (754 MB)", what procedure is right to use ej2?

Regards,
Pylori. 

[Mohammed Farook J]

Hi Pylori, 

 

Please find help documentation  for installing ASP.NET MVC in  Essential JS 2 . 

 

Installation : https://ej2.syncfusion.com/16.1.37/aspnet/documentation/installation.html?syntax=razor#installing-essential-js-2-for-aspnet-mvc  

 

To find the steps for render Grid component in Essential JS 2.  

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 fromSyncfusion.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 

 

 

Dynamically update grid data: 

 

You can dynamically update the grid specific cell by using setCellValue() method  and specific row by using ‘setRowData()’ method. Please find the code example 

 

    var gridObj = document.getElementById("Grid")['ej2_instances'][0]; 

    gridObj.setCellValue(10248, "CustomerID", "updated"); //you can update specific cell 

 

//you can update specific row 

    gridObj.setRowData(10249, { OrderID: 1249, CustomerID: 'new value', CustomerName: 'accc' }); 

API – document : https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#setcellvalue  

https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#setrowdata 

Please let us know if you have faced any difficulties 

Regards, 

J Mohammed Farook