Updating font overrides Table column highlight

Posted by: justin.arias on 10 December 2020, 9:45 am EST

  • Posted 10 December 2020, 9:45 am EST

    Hi,

    I am setting the table highlightFirstColumn using:
    highlightFirstColumn(true)


    This bolds the first column perfectly but doesn't update the cell.font() output to represent a bold font. The issue comes when I update the font using:
    updateSheet.setStyle(row, col, updatedStyle)


    updatedStyle will be based off the font from the cell.font() function. Once the font is updated the cells lose the bold form the highlightFirstColumn.

    What am I doing wrong? Is there a better way to update the style that includes the bold set from table column highlights?
  • Replied 10 December 2020, 7:01 pm EST

    Hi Justin,

    This is the expected behavior from SJS. When you set the font actually you modified the previous font style with the new one that does not have the bold attribute. For this, you may use add the font to the existing font style. Please refer to the following code snippet and attached sample that demonstrates the same.


    document.getElementById("changeFont").addEventListener("click", () => {
    let desiredRange = sheet.getRange(3, 1, 10, 1);
    let oldFont = desiredRange.font();
    let newFont = modifyStyle(oldFont, "font-family", "Arial");
    desiredRange.font(newFont);
    });

    function modifyStyle(oldFont, attr, newValue) {
    let span = document.createElement("span");
    span.style.font = oldFont;
    span.style[attr] = newValue;
    return span.style.font;
    }



    sample: https://codesandbox.io/s/suspicious-sky-dhovh?file=/src/index.js:1481-1930
    Regards
    Avinash
  • Replied 27 December 2020, 11:40 am EST

    Thank you for your response, but the above code is causing non bold cell, that is including in the range of a highlighted column to become bold.

    This can be replicated in the sandbox by increasing the range of the selection and entering text in column B below the table.
  • Replied 27 December 2020, 4:06 pm EST

    Hi Justin.

    Thanks for the information. Actually, SJS range.font returns the font of the first cell of the range that is why when we modify the font actually we added the font family to an old font that has bold information. For handling this, you may use the cell level font method and add the font information cell by cell. PLease refer to the following code snippet and attached sample that demonstrates the same.


    document.getElementById("changeFont").addEventListener("click", () => {
    for (let i = 3; i < 13; i++) {
    let cell = sheet.getCell(i, 1);
    let oldFont = cell.font();
    let newFont = modifyStyle(oldFont, "font-family", "Arial");
    cell.font(newFont);
    }
    });


    sample: https://codesandbox.io/s/stoic-tdd-prike?file=/src/index.js

    Regards
    Avinash
  • Replied 28 December 2020, 4:46 am EST

    Okay thank I will try it implement it and respond with the results
  • Replied 28 December 2020, 6:47 am EST

    Avinash, I am working with v12.09 and I'm seeing that when usign table.highligtFirstColumn(true) and run sheet.getCell().font() I am not able to see the bold attribute. I believe this may be causing the error when changing the font.

    Looking over at your sand box I can see getCell().font() returns "14.6667px Calibri" before calling highlightFirstColumn() and getCell().font() after returns "bold 11pt calibri"

    Is this behavior something added after v12.0.9 and would this cause an issue? Thanks for the help.
  • Replied 28 December 2020, 4:27 pm EST

    Hi Justin,

    Looks like it was a bug in V12 which was fixed in V13. We recommend you to use our latest V14 build since the latest build includes lots of new features and bug fixes. Please update to the latest build and let us know if the issue persists for you.

    Regards
    Avinash


  • Marked as Answer

    Replied 29 December 2020, 1:56 am EST

    Okay we will be implementing the new version soon. Thank you for your time and patience!
Need extra support?

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

Learn More

Forum Channels