Conditional formatting

Tags: #<Tag:0x00007efc71967ed0>
#1

Hi,
How I can implement conditional formatting for User end. End users can apply conditional formatting in any cell??

#2

Hi @suman.dutta

conditional formatting is done by custom renderers. Here’s an example https://handsontable.com/docs/8.0.0/demo-conditional-formatting.html where we use negativeValueRenderer.
If you want to allows the Users to set up their conditional formatting you’d need to provide some UI. Do you already have some ideas on how it should look?

#3

No this is actually pre-defined in code .user wants to apply a conditional formatting rules her/himself.

#4

Can you share an example or a draft? What extra should happen then what’s presented in my demo?

#5

In your demo we need to write the code for conditional formatting and it is fixed . User can’t apply their own conditions.

#6

True. That is why I asked about the UI you are planning to add.

Example
UI: We have 1 input outside the table that accepts integers.
Rule: We turn red all the cells that are less than the number defined in the input.

#7

image
image.png1363×342 23.3 KB

I want feature like this.

#8

I do not have a demo for such functionality but I can share some tips on how to achieve it.

  1. Set up a window with the UI to change the conditional formatting
  2. Set up the afterOnCellMouse down hook to open the window (possibly change its visibility - CSS)
  3. Attach a function (lets call it onChange) to the ‘Apply’ button in the window.
  4. Let onChange read the values of inputs in your window and the cell being selected. To track what cell has been selected you call the getSelected method.
  5. Use onChange to update the cell renderer that attaches conditional formatting.
#9

Thanks !! will try and let you know.

#10

Hi, I have selected cell information, Can you please tell me how can I apply conditional formatting on that selected cell?

#11

Based on a function for a custom renderer

function myRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  // logic
}

row albo col (prop if object) is already accessible by the renderer.

Can you share a demo with your latest progress? It gets easier when you already have the window with inputs.

#12

Finally, it’s working. Thanks.

#13

I’m glad to hear that. Thank you for the update.

#14