Get Free Trial

Need to set css class on updated cell

Marc asked on March 30, 2021

Using angular and flexmonster I am able to set the data
         this.pivot?.flexmonster.connectTo({ data: });
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

Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 31, 2021

Thank you for reaching out.
We have prepared the JSFiddle to demonstrate sample implementation:
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 });

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

Marc March 31, 2021

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

Please login or Register to Submit Answer