I want to add style classes to elements in a cell (or the td itself) that will change depending on the state of the data in the cell. For example, the cell might have color: red when the data is unsaved, color: blue while the data is being saved, and color: black once the save completes successfully. Code external to the Cell
will need access to change the class names, once callbacks are fired, etc.
I have achieved something like this with a hack in my Cell
that gets the Element
from onBrowserEvent and adds attributes there. I can set the initial style in render
and then change it as needed in onBrowserEvent
, and even keep track of that element so that external code can use it. This is incomplete, because I can't get the element until onBrowserEvent is called, and annoyingly hacky because I have to set the style in two different places.
What's a better way to achieve this effect without re-rendering the entire table whenever the state of a cell changes?
The disappointing answer here is that you can't have the best of both worlds - static, all-at-once-rendering, AND dynamic, change-one-element-updating. The only way to change the style of a single cell, within the methods provided by CellTable
et al, is to rerender the whole table.
In my own code I've kind of formalized the hacks I made to update single cells at a time, by setting the DOM id of a div
rendered to each table cell. Then I can use getElementById
and proceed from there. I still avoid the overhead of a full widget. It's a little clunky, but hidden behind a nice interface it's not too bad.