Standard text alignment to center

Standard text alignment to center

Posted by: bastian.wagner on 23 April 2024, 5:22 am EST

• 

  bastian.wagner

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 April 2024, 5:22 am EST

  Hi Mescius Team,
  
  i would like to change the standard text alignement (hAlign) from top to center. I didn’t find a way to to do so, is it possible?

  Thanks in advance!
  
  Bastian

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 24 April 2024, 6:22 am EST

  Hi,

  You can change the alignment(horizontal and vertical) of cell text in SpreadJS. You can do this in two ways: using the Style object and using the CellRange object.

  When using the Style object, first you need to create a Style class instance set its hAlign property to center and set the style to the cell using sheet.setStyle() method.

  When using the CellRange object, you can get cell using sheet.getCell() method and then using hAlign() method of CellRange class.

  Refer to the below code snippet and sample for more understanding.

      sheet.suspendPaint();
      sheet.setValue(0, 1, 'Hello');
      sheet.setValue(1, 1, 'Hello');
      sheet.setValue(2, 1, 'Hello');
  
      sheet.setStyle(1, 1, style);
      sheet.getCell(2, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
      sheet.getCell(2, 1).vAlign(GC.Spread.Sheets.VerticalAlign.center);
      sheet.resumePaint();

  sample: https://jscodemine.grapecity.com/share/MKDAzdLzfUS3HVth8p3CFQ/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Similarly, you can change the vertical alignment of text.

  The hAlign & vAlign property of Style object takes value of enums HorizontalAlign and VerticalAlign respectively.

  References:

  Text alignment demo: https://developer.mescius.com/spreadjs/demos/features/cells/text-alignment#demo_source_name
  
  VerticalAlign enum: https://developer.mescius.com/spreadjs/api/enums/GC.Spread.Sheets.VerticalAlign
  
  HorizontalAlign enum: https://developer.mescius.com/spreadjs/api/enums/GC.Spread.Sheets.HorizontalAlign

  Regards