Conditional formatting overwrites cell type

Tags: #<Tag:0x00007efc64cada48>
#1

I would like to add a css class to a row where one of the cells has a specific value. I tried the conditional formatting (https://handsontable.com/docs/7.1.1/demo-conditional-formatting.html) but it overwrites the renderer with Handsontable.renderers.TextRenderer.apply(this, arguments); my dropdown/checkbox cells are only displayed as text.

How can I fix that?

Here’s a fiddle:
https://jsfiddle.net/5e9mz3wv/1/

The first column should have the dropdown arrow and the third one should be a checkbox.

Thanks

#2

Hey @c.heike

you can set up a renderer for each cell. Here’s an example https://jsfiddle.net/handsoncode/x2384sfw/

if (col === 0) {
  Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);
} else if (col === 1) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
} else {
  Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
}

lines 18-24

#3

Hey @aleksandra_budnik,

Thanks for your solution. It works well, except that I don’t know how to use it on the date renderer, so type: ‘date’. I don’t find this one in the Renderers interface.

What is the solution here?

#4

Here’s a full list of predefined renderers

register(‘autocomplete’, _autocompleteRenderer.default);
register(‘checkbox’, _checkboxRenderer.default);
register(‘html’, _htmlRenderer.default);
register(‘numeric’, _numericRenderer.default);
register(‘password’, _passwordRenderer.default);
register(‘text’, _textRenderer.default);

The autocomplete renderer is the one that is used to show the ‘arrow’ in the cell so we use it in autocomplete, dropdown, date and handsontable cell type.

#5

Ok, I wasn’t aware that the date type simply uses the same renderer as the normal autocomplete.

Thank you, it works now fine.

#6

You’re welcome.

I guess that as there are no pending questions we can close this topic.

#7