Get Free Trial

Need to set css class on updated cell

Answered
Marc asked on March 30, 2021

Context
Using angular and flexmonster I am able to set the data
         this.pivot?.flexmonster.connectTo({ data: this.data });
         this.pivot.flexmonster.setReport(this.report)
Then update the data:

         this.pivot.flexmonster.updateData({data: [newItem]}, {partial: true});

 
The update works perfectly.
 
My Requirements:
 
   When a value is updated in the grid I want to add a css class to that cell to make it flash.
    Failing that, get hold of the row and make that flash.
 
My Problem:
 
    I’ve looked at all your events but I can’t seem to get a reference to the updated cell or row to set my class.

2 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 31, 2021

Hello,
 
Thank you for reaching out.
 
We have prepared the JSFiddle to demonstrate sample implementation: https://jsfiddle.net/flexmonster/0smc8Lz3/.
 
You can see the detailed explanation of the used approach below:
 
Every time you update the data, execute the adjustStyling function after the update and pass the changed records as a parameter:

function editRecords() {
  const dataForUpdate = [...]
  flexmonster.updateData({ data: dataForUpdate }, { partial: true });
  adjustStyling(dataForUpdate);
}

 
The function itself will retrieve all the updated records. Next, it will use the customizeCell API call to iterate over cells of the grid and complement changed cells with a CSS class:

function adjustStyling(dataForUpdate) {
  let updatedId = dataForUpdate.reduce((accum, record) => { //retrieve all identifiers
    accum.push(record.RowId);
    return accum;
  }, []);
  flexmonster.customizeCell((cell, data) => {
    if (data.type != "value" || !data.recordId) return; //filter out headers and cells without recordId
    if (!data.recordId.some((id) => { //checks, if the recordId array includes at least one of the changed identifiers
        return updatedId.includes(id);
      })) return;
    cell.addClass("updated"); //adds the class
  });
}

 
Please let us know if it works for you.
We are looking forward to hearing your feedback.
 
Regards,
Illia

Public
Marc March 31, 2021

Hi Illia,
Integrated your example into my App.  Works perfectly! 
Thanks for the quick response and detailed answer.
Regards,
Marc

Please login or Register to Submit Answer