Updating font overrides Table column highlight

Updating font overrides Table column highlight

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

• 

  justin.arias

  • Post Options:
  • Link
    Copy

  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?

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  justin.arias

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  justin.arias

  • Post Options:
  • Link
    Copy

  Posted 28 December 2020, 4:46 am EST

  Okay thank I will try it implement it and respond with the results

• 

  justin.arias

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 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?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 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