Make page set up header non-editable fields

Make page set up header non-editable fields

Posted by: gagandeep.singh on 26 March 2024, 5:49 am EST

• 

  gagandeep.singh

  • Post Options:
  • Link
    Copy

  Posted 26 March 2024, 5:49 am EST - Updated 26 March 2024, 5:54 am EST

  Hi there,

  In page set up can we make header readonly ? However only we can do formatting but not allowing to change the value?

  Regards

  

  579×555 9.3 KB

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 26 March 2024, 9:14 pm EST

  Hi,

  Please note that the mentioned behavior is not supported by default.

  However, as a workaround, you can utilize CSS and handle events on the dialogs to achieve the desired behavior. You can utilize the CSS given below to disable Page setup dialog options and Header dialog options.

  .gc-designer-page-setup-dialog [tab_id="HeaderOrFooter"] .gc-combo-editor-container,
  .gc-sjs-designer-dialog [tab_id="Header"] .gc-image-button[title="Insert Page Number"],
  .gc-sjs-designer-dialog [tab_id="Header"] .gc-image-button[title="Insert Number of Pages"],
  .gc-sjs-designer-dialog [tab_id="Header"] .gc-image-button[title="Insert Date"],
  .gc-sjs-designer-dialog [tab_id="Header"] .gc-image-button[title="Insert Time"],
  .gc-sjs-designer-dialog [tab_id="Header"] .gc-image-button[title="Insert Workbook Name"],
  .gc-sjs-designer-dialog [tab_id="Header"] .gc-image-button[title="Insert Sheet Name"],
  .gc-sjs-designer-dialog [tab_id="Header"] .gc-image-button[title="Insert Picture"] {
      pointer-events: none;
      opacity: 0.7;
  }

  Additionally, you would need to handle keydown, drop, paste etc events on the editor div in the Header dialog so that the page header/footer text can not be modified.

  Please refer to the attached sample for more understanding. Also, note that the sample only covers the basic requirements. You would need to modify it as per your use case and requirements.

  sample: https://jscodemine.grapecity.com/share/7Q2uPX9GRUK0ZFskESVo_w/?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["%2Findex.html"%2C"%2Fsrc%2Fapp.js"%2C"%2Fsrc%2Fstyle.css"]%2C"ActiveFile"%3A"%2Fsrc%2Fstyle.css"}

  Regards

• 

  gagandeep.singh

  • Post Options:
  • Link
    Copy

  Posted 28 March 2024, 1:03 am EST - Updated 28 March 2024, 1:09 am EST

  Hi Chandan,

  Thanks for your response, sorry I want this to be non-editable. And in this case user should be able to change format but not edit the text. Is it possible?
  
  

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 31 March 2024, 4:55 pm EST

  Hi,

  We are sorry for the inconvenience caused. However, it is not possible to make the page set-up header/footer editor section non-editable(not showing the cursor in the editor sector). This is not supported. If you want to prevent the user from changing the header/footer text, you can prevent the keydown event of the editor section HTML element as demonstrated in the sample provided before. However, the editor section will still show the cursor when clicked.

  Regards