0

I'm following the formatting example shown here:

http://6pac.github.io/SlickGrid/examples/example2-formatters.html

As per the example, the statusFormatter can return addClasses, removeClasses, text and tooltip. However, in my case, the user defines the conditions, and the formatting. For example, through a settings page, the user could specify:

  1. The condition (i.e. ">3"),
  2. The formatting associated with the condition (i.e. blue background with white text)

Hence, I don't have the ability to create the css file at design time. I have the conditions working. So then my colorFormatter returns

returnValue = `<div style="${css}">${value}</div>`

this then creates a cell, which looks like this (with a white border around it)

slick grid inner cell got formatted

Ideally, I would like to pass in the dynamically generated css style back to the grid cell, so the white border doesn't show between the cell border and the formatting which I would like in the cell.

lsu_guy
  • 1,525
  • 15
  • 12
  • Unfortunately, that is the only way (that I know of) to avoid padding around the cell which is to have your Formatter return an object with `addClasses`, that is the only way to add CSS to the cell container vs cell content when your Formatter returns a string. You could try to expand your cell content style to go against the padding but that is quite hacky and doesn't always work (I tried and it wasn't perfect, I also had to use `!important` is I remember correctly). Perhaps build your own CSS class utilities like Bootstrap [utilities](https://getbootstrap.com/docs/4.5/utilities/spacing/) – ghiscoding Jul 08 '20 at 13:54
  • You should also be able to put your custom formatter in the page scripts, inside a closure that allows your code to update the values it uses. Check the examples. – Ben McIntyre Jul 09 '20 at 04:25
  • any objections to extending slickgrid to pass in the dynamically generated "style"? This would be another parameter, just like we can pass in addClasses, removeClasses, text and tooltip. If so, I can work on it and submit a PR. – lsu_guy Jul 09 '20 at 17:33
  • @BenMcIntyre not sure I understand which example you are referring to. I do have the custom formatter in the page script and in a closure. It does run the user defined condition, and dynamically generates the formatting. The formatting gets applies to the cell content, as opposed to cell container since I don't know the user defined formatting at design time to create the CSS file. Could you point me to the example you have in mind? Perhaps I overlooked it. – lsu_guy Jul 09 '20 at 18:01
  • Ah, sorry, I get it now. You want the equivalent of passing the class, but rather you want to pass a style. Have you considered passing a class defined in the CSS section of the page, and updating the class definition? https://stackoverflow.com/questions/566203/changing-css-values-with-javascript – Ben McIntyre Jul 14 '20 at 00:21
  • (note there is some CSS manipulation code in SlickGrid if you want some production code) – Ben McIntyre Jul 14 '20 at 00:23

0 Answers0