Applying 2 or more styles for a single cell

Applying 2 or more styles for a single cell

Posted by: vivek.reddyz on 1 August 2022, 2:31 am EST

• 

  vivek.reddyz

  • Post Options:
  • Link
    Copy

  Posted 1 August 2022, 2:31 am EST - Updated 3 October 2022, 12:08 am EST

  Hi team ,
  
  I am using fromJson() method to get the json data for the sheet. I want to apply 2 different styles in a particular cell . For example , I have a cell with value “200, (-30%)” . In this example, 200 should be in bold and since percentage is a negative number i.e(-30%) it should be in red . I am attaching a screenshot for your reference.

  .

  Could you please provide a solution for this?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 1 August 2022, 5:00 pm EST

  Hi Vivek,

  SpreadJS supports rich text through which you can set different text styles in one cell. You can also create your own custom cell type to match your requirement. You can refer to the following demos.

  Rich Text Demo: https://www.grapecity.com/spreadjs/demos/features/cells/basic-rich-text/purejs

  Custom Cell Type Demo: https://www.grapecity.com/spreadjs/demos/features/cells/cell-types/custom/purejs

  Regards
  
  Ankit

• 

  vivek.reddyz

  • Post Options:
  • Link
    Copy

  Posted 3 August 2022, 9:22 pm EST

  Hi team ,
  
  We are not using .setValue() method to set data inside the cell. We are using fromJson() method. How can we set rich text to different cells inside the json?

  Regards
  
  Vivek

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 August 2022, 3:42 pm EST

  Hi Vivek,

  You can define the rich Text structure as shown in the rich Text Demo: https://www.grapecity.com/spreadjs/demos/features/cells/basic-rich-text/purejs

  Later for setting the rich text inside the json, you can use the following:

  richTextJSON.value.richText = richText;
  richTextJSON.value.text = text;
  

  where richText is the structure of the rich text.

  You can refer to the following sample that I have created for you: https://jscodemine.grapecity.com/share/As_ZdMRxd0_Wp9jWM1EIOA/

  Regards
  
  Ankit