How to add a drop down button in SpreadJS Designer Components?

How to add a drop down button in SpreadJS Designer Components?

Posted by: grapecity on 6 September 2023, 8:49 am EST

• 

  grapecity

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 September 2023, 8:49 am EST - Updated 6 September 2023, 8:57 am EST

  Hello,

  I’m trying to add a dropdown button but I have an issue with the label of the button.
  
  I have the word “false” displayed instead of the button title.

  

  Here is an example of the code I currently have.

  cmdRefreshCache: {
          title: "Refresh",
          text: "Refresh",
          type: "dropdown",
          showDropdownButton: true,
          iconClass: "wb-icon-refresh-cache",
          commandName: "cmdRefreshCache",
          bigButton: true,
          subCommands: [
            "cmdRefreshCacheTest1",
            "cmdRefreshCacheTest2"
          ]
          execute: async (context: GCDesigner.Spread.Sheets.Designer.Designer, 		 propertyName: string) => {
            console.log("Property name : " + propertyName);
          }
  },
  cmdRefreshCacheTest1: {
          title: "test 1",
          text: "test 1",
          commandName: "cmdRefreshCacheTest1",
          execute: this.onRefreshCacheTest1
  },
  cmdRefreshCacheTest2: {
          title: "test 2",
          text: "test 2",
          commandName: "cmdRefreshCacheTest2",
          execute: this.onRefreshCacheTest2
  },

  I’d like to display the right labels instead of “false”.

  Thanks in advance.

  Best regards.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2023, 5:24 pm EST

  Hi,

  In case of “dropdown” type, you need to define the “dropdown” list property that containing all the dropdown options.

  Kindly refer to the following code snippet:

  // Access the default config
  var config = GC.Spread.Sheets.Designer.DefaultConfig;
  config.ribbon[0].buttonGroups.splice(0, 0, {
      "label": "Custom Group",
      "thumbnailClass": "",
      "commandGroup": {
          "children": [
              {
                  "direction": "vertical",
                  "commands": [
                      "customCommand"
                  ]
              },
          ]
      }
  
  });
  config.commandMap = {
      customCommand: {
          title: "Refresh",
          text: "Refresh",
          type: "dropdown",
          iconClass: "wb-icon-refresh-cache",
          bigButton: "true",
          showDropdownButton: "true",
          commandName: "customCommand",
          dropdownList: [
              { text: 'Test 1', value: 'Test1', },
              { text: 'Test 2', value: 'Test2' },
          ],
          execute: (context, propertyName) => {
              switch (propertyName) {
                  case "Test1": {
                      alert("Test 1 Clicked");
                      // Perform Custom Operations
                      break;
                  }
                  case "Test2": {
                      alert("Test 2 Clicked");
                      // Peform Custom Operations
                      break;
                  }
              }
          }
      },
  }
  
  // Set the Config
  designer.setConfig(config);
  

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

  Let us know if you face any issues.

  References:

  setConfig method: https://www.grapecity.com/spreadjs/api/v15/designer/classes/GC.Spread.Sheets.Designer.Designer#setconfig

  Designer DefaultConfig: https://www.grapecity.com/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer#defaultconfig

  ICommand Options: https://www.grapecity.com/spreadjs/api/v15/designer/interfaces/GC.Spread.Sheets.Designer.ICommand

  IListGroupItemData Interface: https://www.grapecity.com/spreadjs/api/v15/designer/interfaces/GC.Spread.Sheets.Designer.IListGroupItemData

  Regards,

  Ankit

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 7 September 2023, 2:04 am EST

  Hi,

  Thank for the fast answer.

  The sample of code you’ve provided works for me, thanks.

  Best regards.