Gantt - Cell highlighting to show cascading changes?

[islandpunch]

Hello! I just gave a demo to one of our PMs. He said one feature that is critical to them is the ability to show which cells have changed when there are cascading changes.

For example, in the attached image, changing the red date will cause the 4 blue dates to be updated... so, after changing the red date, the background color of the 4 fields that were automatically adjusted should be highlighted with a background color. In this example, they're all children of the task that was edited, but often they could be siblings or elsewhere in the tree.

I've implemented the undo/redo functionality in this demo - https://bryntum.com/products/gantt/examples/undoredo/ - but I think there are two issues that I need help with:

1) What is the best way to change the color of a cell in the table, or to do other styling changes?
2) What is the best trigger to hook to apply the colors?

There will probably be two needs:

A) Highlight only the cells that were impacted by the change the user last applied.
B) Highlight all unsaved changes (this is less important).

Where should I start for something like this?

[ghulam.ghous]

Hello,

We have a feature called showDirty that shows a marker in the updated cells which are not yet committed to the backend. See here https://bryntum.com/products/gantt/docs/api/Grid/view/GridBase#config-showDirty

You just need to set the below on gantt:

showDirty: true,

And in the attached clip you can see, there is a marker marking the cell as updated and not committed.

Screen Recording 2024-10-03 at 2.12.39 PM.mov

(7.87 MiB) Downloaded 28 times

Screenshot 2024-10-03 at 2.15.12 PM.png (685.56 KiB) Viewed 743 times

[islandpunch]

Thanks for your quick response!

I just enabled showDirty. This works well for the B item l listed above. Do you have any advice for A? This is the more important feature to the PMs.

[islandpunch]

Here's a gif from Microsoft Project Professional.

The cells that are blue show the values that were changed as a result of the edit I last made. When I change another value, then the highlights are cleared and again, the only values that were adjusted from the next edit are highlighted. This is the feature I need to replicate.

[marcio]

Hey islandpunch,

That's currently not supported and it's not a trivial implementation that we can provide here, so I created a ticket to implement that feature here https://github.com/bryntum/support/issues/10159.

You can also improve the priority of that ticket by providing some feature sponsorship, please contact our Professional Services here https://bryntum.com/services/

[islandpunch]

Thanks for your message.

That’s a feature that I could implement on my own if there was a way to apply a class or other styling to a cell, given an x, y index or a row/column combination. Is that supported?

[johan.isaksson]

I would either try adding a CSS class to cellElement in a renderer that you use for all columns, or try using the getCell() method on Grid (https://bryntum.com/products/grid/docs/api/Grid/view/Grid#function-getCell). It gets you the cell element, if the cell is rendered to the DOM:

grid.getCell({ field : 'city', id : 10 })?.classList.add('highlight');