Display realtime data

[Ian Baker]

Hello,

I am trying to use your grid to display some realtime data. Whenever I add data, it is rendered properly. However, when changing the data in a row, no updates are applied and the same data shows.

I saw that there is a Grid.refresh() method, but I have not seen any documentation explaining how to use it with the new React hooks paradigm. If this is the right direction, I would appreciate an example to see how to use it. If not, what is the proper way to update a grid to display realtime updates?

Thank you,

[Pavithra Subramaniyam]

Hi Ian Baker, 

Thanks for contacting Syncfusion support. 

By default, “refresh” method will re render the Grid rows with updated data. To suggest a way to achieve your requirement we need some more details that will be helpful for us to validate further. So could you share the below details? 

1. Share your full Grid code
2. How you change the data Source
3. Is there any error?

Regards, 

Pavithra S 

[Ian Baker]

Sure, here is my grid code:

import {

  GridComponent,

  Inject,

  Page,

} from "@syncfusion/ej2-react-grids";

import { useEffect, useState } from "react";

import useSocket from "../../../hooks/use-socket";

function SyncBench() {

  const [gridData, setGridData, paused, setPaused] = useSocket("Syncfusion");

  const [headers, setHeaders] = useState([] as Record<string, unknown>[]);

  useEffect(() => {

    if (gridData.length > 0) {

      const genHeaders = Object.keys(gridData[0]).map((key) => {

        return { field: key, headerText: key, isPrimaryKey: false };

      });

      const primaryHeader = genHeaders.find((header) => header.field === 'OrderID');

      if (!!primaryHeader) {

        primaryHeader.isPrimaryKey = true;

      }

      setHeaders(genHeaders);

    }

  }, [gridData]);

  return (

    <>

      <div>

        <button onClick={() => setPaused((isP) => !isP)}>

          {paused ? "Resume Socket" : "Pause Socket"}

        </button>

        <button

          onClick={() => {

            setGridData([]);

            setHeaders([]);

          }}

        >

          Clear Grid

        </button>

      </div>

      <GridComponent

        dataSource={gridData}

        allowPaging={true}

        height={600}

        pageSettings={{ pageSize: 50 }}

        columns={headers}

      >

        <Inject services={[Page]} />

      </GridComponent>

    </>

  );

}

export default SyncBench;



The datasource is updated in the useSocket hook, with the important parts provided here:



setGridData((curGridData: Record<string, unknown>[]): Record<string, unknown>[] => {

            const updatedData = curGridData;

            data.forEach((update: Record<string, unknown>) => {

              updatedData[Math.floor(Math.random() * 10)] = update;

            });

            return updatedData;

          });

This is where the datasource is updated. Not shown is unrelated logic along with the gridData being returned by the hook to be used elsewhere.

I have not seen any errors when running my code. Please let me know if you need any more information.

Thanks,

Ian

[Rajapandiyan Settu]

Hi Ian Baker, 

Thanks for your update. 

Currently, we are preparing the sample as per your code example. We will update the further details on or before Feb 11^th, 2022. 

We appreciate your patience until then. 

Regards, 

Rajapandiyan S 

[Joseph Christ Nithin Issack]

HI Ian, 

  Sorry for the delay.  

Currently, we are facing some complexities in preparing the sample as per your code example. We will update the further details on or before Feb 15th, 2022.  

We appreciate your patience until then.  

Regards,  

Joseph I 

[Rajapandi Ravi]

Hi Ian, 

Thanks for your patience 

Based on your attached code example we found that you have tried to clear the Grid component dataSource with setState in your Grid application. By default, in our EJ2 Grid to update the Grid related properties properly we suggest you use the Grid instance instead of setState in your Grid application and we have also cleared the grid dataSource using external state variable which is not bound to the grid component.  For your convenience we have attached the sample, please refer them for your reference. 

export const Localbinding = (props) => { 

  const gridRef = useRef(null); 

  const [data, setData] = useState(); 

  useEffect(() => { 

    refreshGrid(); 

  }, [data]); 

  console.log('render'); 

  function refreshGrid() { 

    setData(dataSource); 

  } 

  var ddObj; 

  const onclick = (e) => { 

    var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

    grid.dataSource = []; 

    setData(grid.dataSource); 

  }; 

  return ( 

    <div className="control-pane"> 

      <div className="control-section"> 

      <button onClick={onclick}> Clear Grid</button> 

        <GridComponent ref={gridRef} dataSource={dataSource}> 

          <ColumnsDirective> 

            <ColumnDirective 

              field="id" 

              isPrimaryKey="true" 

              headerText="Order ID" 

              width="120" 

              textAlign="Right" 

            /> 

            <ColumnDirective 

              field="status" 

              headerText="Status" 

              width="150" 

              editType="dropdownedit" 

            /> 

          </ColumnsDirective> 

          <Inject services={[Edit, Toolbar]} /> 

        </GridComponent> 

      </div> 

    </div> 

  ); 

}; 

Sample: https://stackblitz.com/edit/react-krp5dz-tdbdbo?file=index.js 

If you still face the issue, please share the below details that will be helpful for us to provide better solution. 

1)        In your query, we could see that you are trying to clear the Grid by using state variable, since your reported problem was not reproduced at our end, please share the issue reproducible that  

            will be helpful for us to validate. 

2)        Share the issue replication procedure step by step with video demonstration. 

3)        Share your Syncfusion package version. 

Regards, 

Rajapandi R