Display rounding of numbers in UI

Display rounding of numbers in UI

Posted by: ryan on 2 September 2022, 1:30 pm EST

• 

  ryan

  • Post Options:
  • Link
    Copy

  Posted 2 September 2022, 1:30 pm EST - Updated 3 October 2022, 9:02 am EST

  In our product, we display no decimal points on default to our users. For example, in the screenshot the selected cell is 11.59899 but it displays at 12 due to the auto rounding that occurs as a display. This cell is locked. We do not want the user to be able to edit the value.

  However, we want the user to be able to see the actual number (11.59899) if they so choose to. What’s the best way to achieve this? Is there a way to display the 11.59899 if the user hovers over the cell or interacts w the cell in some other way? I don’t think double click works because that would imply it is an editable cell?

  

  2157×1633 192 KB

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 5 September 2022, 2:38 am EST

  Hi,

  For this, you set the cell formatter and define how many digits after the decimal point you want to show. Please refer to the following code snippet and let me know if you face any issues.

  sheet.setFormatter(row,col."##,###.########");
  
  

  You may also refer to the following case where we had a similar discussion.

  similar case: https://www.grapecity.com/forums/spreadjs/number-should-not-be-round

  regards,
  
  Avinash

• 

  ryan

  • Post Options:
  • Link
    Copy

  Posted 6 September 2022, 1:26 pm EST

  We know how to set the number format so that we do not show any digits after decimal point on default but I don’t think you answer addresses the second part of my question:

  However, we want the user to be able to see the actual number (11.59899) if they so choose to. What’s the best way to achieve this? Is there a way to display the 11.59899 if the user hovers over the cell or interacts w the cell in some other way? I don’t think double click works because that would imply it is an editable cell?

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 7 September 2022, 2:07 am EST

  Hi,

  for this, you may use the hitTest feature and create your own tooltip. Please refer to the following to following sample that explains the same and let me know if you face any issues.
  
  sample: https://codesandbox.io/s/spread-js-starter-forked-9je4r?file=/src/index.js
  
  Regards,
  
  Avinash