Use numericFormat option with custom renderer

Tags: #<Tag:0x00007f8b1da3ca00>
#1

I am attempting to use a custom renderer to add a div to all numeric cells which I then attach an event listener to. The issue I’m running into is that I am also attempting to use the numericFormat option on the column to format the displayed values. I cannot find a way to access the formatted value in my custom renderer so that I can insert the formatted value into the cell div. Is there any way to do this without formatting the raw value manually in the custom renderer?

How to avoid converting comma to decimal on data intersertion
#2

Hi @joeysamons

Can you attach some samples of input/and output (renderer/editor/validator) of the desired result? That would help me to confirm if I correctly understand the desired result.

#3

Hi Aleksandra,

So I have a numeric column and I’ve specified a numericFormat with the pattern property set to ‘0,0.00’ (two decimal spots and commas at the thousands place). A pretty close example of my custom renderer for this column is below. Before I attached the event listener directly to the cell. Now that cells are being reused in newer versions of HOT I have to insert a div into the cell and attach the listener to that element instead. This caused the cells to no longer display the formatted data value, so I now need to manually insert the value I want displayed into the cell div (if there is some way to let HOT handle this please let me know).

My question is, is there a property in cellProperties or some other way to access the formatted value (as per the numericFormat defined on the column) from within my custom renderer? Or do I need to reformat the raw data value in my custom renderer as I have below with value.toFixed(2)? Note that the custom renderer code below will not include commas, I just wrote this example quickly.

 tdNumericRenderer(instance, td, row, col, prop, value, cellProperties) {
      Handsontable.renderers.NumericRenderer.apply(this, arguments);

      const cellDiv: HTMLElement = <HTMLElement>RenderingService.createElement('div');

      Handsontable.dom.addEvent(cellDiv, 'dblclick', (e: MouseEvent) => {
            some stuff;
      });

      if (value !== null && value !== undefined) {
        const formattedValue = value.toFixed(2);
        cellDiv.text(formattedValue);
      } else {
        cellDiv.empty();
      }

      td.html(cellDiv);

      return td;
    }
#4

Hi @joeysamons

I’m having a week of meetings. I do not want you to wait too long, so I decided to ask my colleague to review your request and share his ideas.

#5

Hi @aleksandra_budnik,

You actually already helped me get an answer via an email to support. The issue was the version of @angular-devkit/build-angular I was using had a dependency on a version of Terser where the bug still existed. Upgrading the version of @angular-devkit/build-angular to one that uses Terser v4.8 appears to have resolved the problem. Thank you though!

1 Like
#6