How can fire event after the user change the FONTs on the Ribon menu

How can fire event after the user change the FONTs on the Ribon menu

Posted by: duyxxnguyen on 16 January 2024, 3:44 am EST

• 

  duyxxnguyen

  • Post Options:
  • Link
    Copy

  Posted 16 January 2024, 3:44 am EST - Updated 16 January 2024, 4:00 am EST

  Hi there,

  I have a matter that relates to firing the event after the user selects the Fonts Items on the Ribbon menu as pictured below. My actions include:

  1. input value into the cell
  2. Go to Menu > Hom > select Bold/Italic/ Color for the inputted value on the cell
     
     NOW, I want to trigger events after the system applied Bold/Italic/ Color to the value a
     
     My system is using SpreadJS version 16.2.3

  

  1330×593 52.4 KB

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 17 January 2024, 2:15 am EST

  Hi,

  You can add a Listener to the SpreadJS’s command manager and detect the changes you made using the Designer Component. Kindly refer to the following code snippet and the sample:

  // Bind the Listener to SpreadJS's command Manager
  spread.commandManager().addListener("listener", (info) => {
      if (info && info.command && info.command.cmd) {
          let cmd = info.command.cmd;
          let value = info.command.value !== null || undefined ? info.command.value : null;
          switch (cmd) {
              case "Designer.setFontWeight":
                  console.log("Bold");
                  console.log(value);
                  break;
              case "Designer.setFontStyle":
                  console.log("Italics");
                  console.log(value);
                  break;
              case "Designer.setUnderline":
                  console.log("Underline");
                  console.log(value);
                  break;
              case "Designer.setDoubleUnderline":
                  console.log("Double Underline");
                  console.log(value);
                  break;
              case "Designer.setBorder":
                  console.log("Border");
                  console.log(value);
                  break;
              case "Designer.setBackColor":
                  console.log("BackColor");
                  console.log(value);
                  break;
              case "Designer.setForeColor":
                  console.log("ForeColor");
                  console.log(value);
                  break;
              default:
                  console.log(cmd);
                  console.log(value);
          }
      }
  });

  Sample: https://jscodemine.grapecity.com/share/zmV_hq-uHU2WCkgYKKUeFw/?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"}

  Regards,

  Ankit