Grid liva data update

[Volodymyr]

Hi there, 

I'm trying to use your example to display real-time data in the grid. It looks good so far. 

However, I have a few questions: 

1. How can I preserve the sort order after setCellValue() updates the cells?
2.  If I’m using paging, how should I update the grid data and recalculate the aggregated values?
3. How to update only grid view data but keep data source updated?
4.  Or, do you have any advice on the best way to handle real-time data while keeping all grid services (sorting, paging, aggregation, etc.) working smoothly?

[Dineshnarasimman Muthu]

Hi,

Greetings from Syncfusion Support.

Based on your query, it appears you're implementing live data updates using the setCellValue method and would like to maintain sorting, aggregates, and paging while also updating the dataSource.

To achieve this, we recommend using the setProperties method to update the dataSource of the grid instead of using setCellValue. This will change the updated dataSource to the grid dataSource and maintain the sort order, paging and aggregates will be updated according.

The code snippet of the implementation and sample has been attached.

  public updateDataSource(): any {

    const updatedData = [...this.gridInstance.dataSource];

    for (let i = 0; i < updatedData.length; i++) {

      if (updatedData[i] === undefined) {

        continue;

      }

      let num = Math.floor(Math.random() * 99) + 1;

      num *= Math.random() < 0.5 ? -1 : 1;

      const oldValue = updatedData[i]['Net'];

      if (i % 2 === 0) {

        num *= 0.25;

      } else if (i % 3 === 0) {

        num *= 0.83;

      } else if (i % 5 === 0) {

        num *= 0.79;

      } else if (i % 4 === 0) {

        num *= 0.42;

      } else {

        num *= 0.51;

      }

      const newNet = parseFloat(num.toFixed(2));

      const change = parseFloat((newNet - oldValue).toString().substring(0, 2));

      const rating = newNet < 0 ? 'Sell' : 'Buy';

      const netIncome = newNet + change;

      updatedData[i] = {

        ...updatedData[i],

        Net: newNet,

        Change: parseFloat(change.toFixed(2)),

        Rating: rating,

        NetIncome: netIncome,

      };

    }

    this.isDataBound = true;

    this.gridInstance.setProperties({ dataSource: updatedData });

  }

 

Sample: https://stackblitz.com/edit/angular-aa7fftgj?file=src%2Fapp.component.ts

Please get back to us for further assistance.

Regards,

Dineshnarasimman M