Custom Percentage Formatting

Custom Percentage Formatting

Posted by: curiosichi on 10 January 2023, 11:27 am EST

• 

  curiosichi

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 January 2023, 11:27 am EST

  I have a cell I’d like to apply a custom format to.

  For everything up until today, we’ve been fine applying cell styles with a object property of format: ‘P2’ for percentages, for example.

  However, we were just given the requirements to format the percentage without the percentage sign.

  We don’t want to change the underlaying data (which is a calc like “=A1/A2”), so a “* 100” or altering the calculated output data isn’t an option.

  Is there a simple way to apply a custom cell style that alters the displayed value but not the underlaying grid data that isn’t a part of the set of standard numeric format strings?

  Thanks.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 10 January 2023, 6:37 pm EST

  Hello,

  You may handle the formatItem event of FlexGrid and update the cell’s displayed content after removing ‘%’ sign. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/angular-5sdkxs?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  curiosichi

  • Post Options:
  • Link
    Copy

  Posted 12 January 2023, 7:42 am EST

  https://stackblitz.com/edit/angular-fsc2qy

  cell A1, with a value of “=B1/B2”, evaluating to “.50” would be formatted “50%” with a P2 format, but we would instead like just “50”.

  Could you show me how this would work with a calc cell in this example? Also, I need it applied on the cell level (or cell range), not column. Thanks!

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 12 January 2023, 6:27 pm EST

  Hello,

  It seems you have unbound sheets into FlexSheet controls, in that case, you can use a similar approach for calc cells as well with a few changes. To apply the formatting for the pre-defined ranges you can create a ranges array and apply the changes by checking if the cell lies in any of that range values or not and remove the ‘%’ sign from the cell element by getting the cell instance from the DOM to get the calculated value. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/angular-ebdkwu?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  curiosichi

  • Post Options:
  • Link
    Copy

  Posted 13 January 2023, 5:50 am EST

  They key to success for us here for us was the setTimeout() to allow the calcs to evaluate and update textContent, as well as storing the row and col properties in variables to be referenced by the getCellElement.

  Thanks for the guidance and suggestion.