Allow header names to be multiline and wrap at a specific point

Posted by: pawel on 5 February 2021, 1:05 am EST

  • Posted 5 February 2021, 1:05 am EST

    For long header names to be multiline and is it possible to specify the point where they wrap. For example:
    "This is my column header"

    "This is"
    "my column header"

    If it was possible to have a HTML column header I would've just inserted <br />:
    "This is"
    <br/>
    "my column header"
  • Replied 7 February 2021, 7:16 pm EST

    Hi Pawel.

    You may use the wordWrap method for the required functionality. Please refer to the following code snippet and attached sample that demonstrates the same.


    sheet
    .getCell(0, 0, GC.Spread.Sheets.SheetArea.colHeader)
    .text("Hello \n this is a long Text")
    .wordWrap(true);
    sheet.setRowHeight(0, 80, 1);


    sample: https://codesandbox.io/s/epic-sunset-xnqkg

    API references:

    wordWrap: https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.CellRange~wordWrap.html

    Regards
    Avinash
  • Replied 7 February 2021, 9:02 pm EST

    Thanks, this is good - is there also a way to control word-wrap points? Is it possible to insert non-breaking-space for instance?
  • Replied 8 February 2021, 6:04 pm EST

    Hi Pawel,

    If we set the word for a cell to true then the content which is overflowed from that cell is wrapped and shows inside the cell. Word wrap does not add any break line to the content. it just shows the content inside cell without changing the content.

    So controlling the word-wrap point could not be possible because it automatically identifies which word is not inside the boundary of the cell.

    so all the space is considered nonbreaking spaces unless it gets overflowed from the cell boundary. You may add the non-breaking space but if it overflowed from the cell wordWrap add that word to the next line.

    Please refer to the following code snippet and attached sample that demonstrates the same.


    sheet
    .getCell(0, 1, GC.Spread.Sheets.SheetArea.viewport)
    .text("A\nB C D")
    .wordWrap(true);
    sheet
    .getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport)
    .text("A B C D E F")
    .wordWrap(true);

    sample: https://codesandbox.io/s/elegant-mirzakhani-7je55

    Fonts Demo: https://www.grapecity.com/spreadjs/demos/features/cells/font/purejs

    Regards
    Avinash
  • Marked as Answer

    Replied 9 February 2021, 12:25 am EST

    Ok great, thanks, that should be good for the time being. Thank you for detailed explanation!
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels