Protect sheet

Protect sheet

Posted by: pedro.moraes on 8 August 2023, 8:46 am EST

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 August 2023, 8:46 am EST - Updated 8 August 2023, 8:51 am EST

  Hello,

  When I protect the sheet the toolbar is blocked

  

  1116×123 16.8 KB

  I would like to know if there is a way to protect the sheet without blocking the toolbar?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 9 August 2023, 2:54 am EST - Updated 9 August 2023, 2:59 am EST

  Hi Pedro,

  Currently, when you protect the sheet, the toolbar is blocked as the users shouldn’t make any changes to the sheet. This behavior is by design and it also matches with the Microsoft Excel’s design.

  Currently, there is no good way to unblock the toolbar without unprotecting the sheet. However, SpreadJS does allow options to allow users to perform some actions on the protected sheet as shown below.

  

  1881×1000 75.6 KB

  Further, if you could elaborate your use case, why you want to protect the sheet and what all options you want to allow users to have so that we could have a better understanding of your use case and could assist you accordingly?

  Regards,

  Ankit

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy

  Posted 9 August 2023, 3:16 pm EST

  Hey,

  Of course, I would like to edit the unlocked cells (using the toolbar like bold, italics, colors…) even with sheet protection active.

  And in cells locked when clicking on a toolbar function, nothing happens.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 9 August 2023, 11:22 pm EST - Updated 9 August 2023, 11:28 pm EST

  Hi,

  When the sheet is protected, you cannot change the font, apply styles like bold, italics, color… to even the unlocked cells. This is by design, and it follows the Microsoft Excel’s policy.

  To apply the font, and other styles, you need to check the “Format Cells” option when protecting the sheet. Then you could apply the style to both the locked and unlocked cells same as the Microsoft Excel.

  Further, if you don’t want to enable the “Format Cells” option and still want the users to apply the color, font, to the unlocked cells, you could change the “enableContext” property of the respective command and add the “!IsIncludeLockedCell” with the OR operator (“||”) to enable the command for unlocked cells.

  You could inspect the Designer’s default config to get the command name.

  For example, if you want to enable the Italics only on Unlocked cells, you could get the italics Command by using:

  // Get the Font Italic Command
  var fontItalicCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FontItalic);
  console.log("Font Italic Command");
  console.log(fontItalicCommand);

  Further, if you check the fontItalicCommand’s enableContext property, you will find it to be “AllowFormatCells && !DisableHomeButton && !ChartSelected && !ShapeSelected && !pictureSelected && !SlicerSelected && !SelectedOrEditComments”.

  Now just add the “!IsIncludeLockedCell” in the enableContext property, so that it becomes “!IsIncludeLockedCell || (AllowFormatCells && !DisableHomeButton && !ChartSelected && !ShapeSelected && !pictureSelected && !SlicerSelected && !SelectedOrEditComments)”.

  Kindly refer to the following code snippet and the sample:

  // Get the Default Config
  let config = GC.Spread.Sheets.Designer.DefaultConfig;
  console.log("Config");
  console.log(config);
  
  // Get the Font Family Command
  var fontFamilyCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FontFamily);
  console.log("Font Family Command");
  console.log(fontFamilyCommand);
  
  // Get the Font Italic Command
  var fontItalicCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FontItalic);
  console.log("Font Italic Command");
  console.log(fontItalicCommand);
  
  // Get the Back Color Command
  var backColorCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.BackColor);
  console.log("Back Color Command");
  console.log(backColorCommand);
  
  config.commandMap = {
      "fontFamily": {
          enableContext: "!IsIncludeLockedCell || (AllowFormatCells && !DisableHomeButton && !ChartSelected && !ShapeSelected && !pictureSelected && !SlicerSelected && !SelectedOrEditComments)"
      },
      "fontItalic": {
          enableContext: "!IsIncludeLockedCell || (AllowFormatCells && !DisableHomeButton && !ChartSelected && !ShapeSelected && !pictureSelected && !SlicerSelected && !SelectedOrEditComments)"
      },
      "backColor": {
          enableContext: "!IsIncludeLockedCell || (AllowFormatCells && !DisableHomeButton && !ChartSelected && !ShapeSelected && !pictureSelected && !SlicerSelected && !SelectedOrEditComments)"
      }
  }
  
  // Set the Config
  designer.setConfig(config);

  Sample: https://jscodemine.grapecity.com/share/96eNBPeBtUCpvvPmD_2rIw/?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["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  References:

  FontFamily Command: https://www.grapecity.com/spreadjs/api/v16/designer/classes/GC.Spread.Sheets.Designer.CommandNames#fontfamily

  BackColor Command: https://www.grapecity.com/spreadjs/api/v16/designer/classes/GC.Spread.Sheets.Designer.CommandNames#backcolor

  FontItalic Command: https://www.grapecity.com/spreadjs/api/v16/designer/classes/GC.Spread.Sheets.Designer.CommandNames#fontitalic

  You could refer to the following link for all the command names available: https://www.grapecity.com/spreadjs/api/v16/designer/classes/GC.Spread.Sheets.Designer.CommandNames

  You could also refer to the following docs on Enabling and Disabling the Ribbon Elements: https://www.grapecity.com/spreadjs/docs/spreadjs_designer_component/customizations/enable_disable_ribbon_elements

  Regards,

  Ankit

  

• 

  georgeg

  • Post Options:
  • Link
    Copy

  Posted 9 April 2025, 2:11 pm EST

  Is there an easy way to inspect the config:

  let config = GC.Spread.Sheets.Designer.DefaultConfig;

  and find the components you want to enable?

  I couldn’t find a relationship with this config object and any properties with fontitalic within it. (?)

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 10 April 2025, 5:50 am EST - Updated 10 April 2025, 5:56 am EST

  Hi,

  It is possible to get the command name to be executed from within the config object and to get all the properties of the command, the getCommand method (https://developer.mescius.com/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer#getcommand) of the Designer can be utilized.
  
  Please refer to the attached sample and the screenshot, which demonstrates how to inspect the config object (see below).

  You can also get the command without drilling into the config object by referring to the SpreadJS Designer CommandNames (https://developer.mescius.com/spreadjs/api/designer/classes/GC.Spread.Sheets.Designer.CommandNames). The page lists down all the commands used in the SpreadJS Designer, and you can inspect the command as required. Furthermore, all the designer-specific features are listed on SpreadJS Designer Namespace (https://developer.mescius.com/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer), you can always refer to this documentation to learn how to deal with the SpreadJS Designer.

  Please feel free to reach out if you require any additional guidance.

  Sample: https://jscodemine.mescius.io/share/lA3CQSgOS0yBSzTMBFwUAA/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Inspection:

  fontItalicConfig.zip

  Best Regards,

  Ankit