Dialog and the side panel

Dialog and the side panel

Posted by: storm.binary on 7 July 2024, 9:56 pm EST

• 

  storm.binary

  • Post Options:
  • Link
    Copy

  Posted 7 July 2024, 9:56 pm EST

  Please provide snippets of code for activating dialogs, e.g. “Insert Chart” and the side panel properties.
  
  Thank you

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 8 July 2024, 10:59 pm EST - Updated 8 July 2024, 11:04 pm EST

  Hi,

  There is no direct API to activate the insert chart dialog via code, but you can achieve this by selecting the DOM element of the insert chart button and using the click method to open the dialog. Refer to the attached snippet.

  document.getElementById("insertChartDialog").addEventListener("click", (e) => {
      if (designer.activeRibbonTab() !== "insert" || !(designer.getData("AllowInsertChart") && designer.getData("AllowEditObject"))) return;
  
      const insertButton = document.querySelector('[data-command="ribbon.insertChart"]');
      insertButton.click();
  });

  Regarding your query about “the side panel properties,” if you mean opening the format chart side panel by code, you can achieve this by executing the FormatChart command. Refer to the attached snippet.

  document.getElementById("formatChartPanel").addEventListener("click", (e) => {
      spread.commandManager().execute({cmd: GC.Spread.Sheets.Designer.CommandNames.FormatChart});
  });

  I have attached a GIF “Steps.gif” and a sample for your reference.

  GIF:

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

  References:

  execute: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Commands.CommandManager#execute

  Regards,
  
  Priyam