Hello there,
my apology if this is and old question.
This is about htmlDataGrid column configuration and I need to add color codes right next to the numbers in each row, it can be a colored box/circle, etc., so something like this one below:
I'm trying to ignore sending them in a separate column because they need to be next to the numbers and cannot float in responsive mode and I'm not sure if it's a good idea to define a fixed width for their column so I was thinking I might be able to add a small html tag right beside the content of the column in column configuration, something like an SVG tag, etc., and then send the color through a table driven variable from Fox.

I would appreciate any suggestion.
Kathy

You can probably use a FontAwesome icon and adjust the font size and color to fit.

<i class="fas fa-square" style="font-size: 25pt ; color: red"></i> Some Text

which produces:

Some Text

You might have to adjust the font-awesome styling above depending on the version of FontAwesome that you're using.

You can probably do this without fonts too just using a span with some padding:

<span style="padding: 0.5em 1.25em; background: firebrick"></span>   Some Text

which looks like this:

  Some Text

Whatever you come up with for the styling, dump it into a CSS class (.square-box { }) so you can easily adjust the size of the box or font in one place.

+++ Rick ---

Thank you so much Rick,
your note was as helpful as always.
I did it like this and it looks like to be working for now but they are for the Title field which is character:

loColumn_1 = loGridConfig.ADDCOLUMN(['<i class="fas fa-square" style="font-size: 15pt ; color: ' + color + '"></i>' + title],"","C")

And I think it will also work for sortable numeric fields with no conflict, I just did a quick test and it worked but please correct me if I'm wrong.

Thanks again,
Kathy

Yes this would also work with a number field but you'd have to parse the number into a string as part of the value you're displaying. Ideally you'd have to pre-sort the list before displaying because numbers won't sort right using string values unless you pad.

Frankly though, when you build complex grids like this, a lot of times it's cleaner and easier to just build it by hand using a <% SCAN %> loop in the mark up, but you'd lose the ability to sort.

Thank you so much Rick,
I'm going to use this grid on kind of a dashboard page with other grids and charts, so wish me luck with sorting, etc. 😃
I'll keep your notes as my reference.
Thanks again,
Kathy

using HtmlDataGrid works well enough, it's sometimes just difficult to get the nested string expressions right.

HotReload helps 😄 as you can make changes quickly and recover quickly from bad syntax.

+++ Rick ---

Thanks for the note Rick.
And would you please explain what you mean by "HotReload"! Is it a function/tool or is it an expression? 😃
Thanks,
Kathy

In Web Connection it's call Live Reload:

• Live Reload during Development

+++ Rick ---

This is SO cool.
Thank you so much Rick.
Kathy