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


  • Replied 26 March 2021, 8:07 am EST

    Hi Avinash, I work as a developer alongside Justin. We have updated to v14.0.5, and the issue is still there.
    Is there a workaround we can use to fix this?
  • Replied 29 March 2021, 11:07 pm EST

    Hi Adisa,

    I tried with version v14.0.5 and it seems to be working fine with the shared sample. Are you able to observe the issue in the sample shared by Avinash? If not, could you please check the sample and let us know if there is something missing in the sample that is necessary for replicating the issue. You may also share a fresh sample that replicates the issue for us to investigate.

    ~sharad
  • Replied 2 April 2021, 4:29 am EST

    Hi Sharad, the shared sample no longer works for me, when I open the link I get a GC not defined error.
    But I was able to reproduce the issue on the SpreadJS designer here https://www.grapecity.com/spreadjs/designer/index.html
  • Replied 4 April 2021, 8:10 pm EST

    Hello Adisa,

    the shared sample no longer works for me, when I open the link I get a GC not defined error.
    We are sorry but we are unable to replicate the issue at our end. Please refer to the following attached sample(please run npm install and npm start ) and if the issue persists please share more information about the environment so that we could test it on your environment and assist you accordingly.

    But I was able to reproduce the issue on the SpreadJS designer here

    Could you please share some steps by which we could reproduce the issue on the provided link? Please provide the step so that we could replicate the issue at our end and help you accordingly.


    Regards
    Avinash

    TableFont.zip
  • Replied 7 April 2021, 7:17 am EST

    So I was able to identify what is happening. I believe the issue is occurring because we aren't maintaining the "bold" when changing the font family, this is also occurring in the Spreadjs designer which is why I thought it was a spread issue.
    The sample you provided has the correct way to update the font family thanks
  • Replied 7 April 2021, 7:46 pm EST

    Hi Adisa,

    If I understand correctly the issue has been resolved. Feel free to revert back if you have further queries regarding this issue.

    Regards
    Avinash
Need extra support?

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

Learn More

Forum Channels