I need to have a custom CSS class attached to rows, based on the content of the row. For example, most rows might have a class “Normal” but a few rows might need the class “Important” based on a field on that row.
To make this even a bit harder, this happens in a drawer - which means the table doesn’t render until the drawer is expanded.
I attempted to do this from a custom field renderer, which I would take the element of the field, and locate the parent “TR” element so I can assign the class there. However, at the time of field rendering the element is not attached to the table, so I’m unable to traverse to the parent.
What would work is if there is an event I can attach to that would signal either when a row is fully attached to the DOM, or provide the row DOM element, or even signal me when the entire table is attached to the DOM (and I could then pass over the model, locate the elements for each row and locate the parent TR element to adjust the CSS class).
Any thoughts on how I might accomplish this? I don’t see an appropriate event to use (for example, a “table-rendered” event or a “drawer-rendered” event).
For a future idea, it woudl be great if would could attach CSS (using moustache) to a row element, in which case this would become easy!
Thanks!!
- Chris
So to be clear, a renderer like the answer provided here is not satisfactory? It sounds like you have two requirements for your custom CSS, dependent on the containing row and the table within the drawer. If this is the case, you can write 2 custom renderers in which you add 2 custom classes to cater to your specific needs, then use nesting css rules to style them appropriately.
I didn’t catch that article in my searches … and that totally shed the light on my mistake. I was using field.element (the element of the field itself) and not field.item.element (which gives the row, or TR).
Thanks!
- Chris
