Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1415
Update the data in the grid when the column value changes
posted

Hi Team, 

I am using Igx-data grid angular to display the data from API.

Requirement : I have to get updated data on click of button and if there is change in previous value and current value for one column that reload the grid to display updated data.

TS: 

// Binds the grid data and reloads the grid every 25 secs to get the latest data.

clickGetLatest() {

this.intervalId = setInterval(() => {
        
          this.getData();
          this.grid1.cdr.detectChanges();
        
      }, 20000);

}

getData() {

this.data = this.service.getData();

this.grid1.data = this.data;

}

MY requirement is to reload the grid only when previous and current value than only gird should reload with current value.

Please help

  • 700
    Offline posted

    Hello Shobhana,

    Thank you for posting into our community!

    I have been looking into your question and I am under the impression that you require to compare the values for one specific column and if the values of the API data, i.e., current values, are different from the values of the grid column, i.e., previous values, the data should be reloaded. Could you please confirm if my impression is correct?

    If it is correct, an approach I could suggest is getting a reference of the cell values for the specific column, comparing these values with the new data, and reloading the data if they differ.

    For example:

    const currentColumnValues = this.grid
        .getColumnByName('COLUMN_FIELD')
        .cells
        .map((x) => x.value);
    
    const updatedColumnValues = this.service.getData().map((x) => x.COLUMN_FIELD);
    
    for (let index = 0; index < currentColumnValues.length; index++) {
        if (currentColumnValues[index] !== updatedColumnValues[index]) {
            this.differ = true;
            return;
        }
    }
    
    if (this.differ) {
        // reload data
    }

    Please test this approach on your side and let me know if you need any further assistance regarding this matter.

    Additionally, if this is not an accurate demonstration of what you are trying to achieve, it would be highly appreciated and extremely helpful if you could provide me with a small, isolated sample that demonstrates the configuration of your application as well as how the data is received from the service and reloaded.

    Thank you for your cooperation. Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Associate Software Developer