Border dropdown not appearing

Border dropdown not appearing

Posted by: kevin.calderon on 4 July 2023, 8:32 pm EST

• 

  kevin.calderon

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 July 2023, 8:32 pm EST

  Hi, I have a custom configuration in place for the Designer and somehow the border arrow is not appearing next to the border icon, is there any command I am missing here?

  I have added the border in the line 85 and it appears as this:

  https://ibb.co/7rGMfqy

  Also if I apply the default configuration to the component the arrow appears, so I am guessing an extra command is needed. I am on v16

  Thanks in advance!

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2023, 1:33 pm EST - Updated 5 July 2023, 1:38 pm EST

  Hi Kevin,

  Please find below the code snippet through which you could setup the border command along with the dropdowns.

  // Access the default config
  var config = GC.Spread.Sheets.Designer.DefaultConfig;
  
  // Layout of the new button
  var customCommand = {
      "label": "Custom Button",
      "thumbnailClass": "",
      "commandGroup": {
          "children": [
              {
                  "command": "border",
                  "type": "dropdown",
                  "children": [
                      "bottomBorder",
                      "topBorder",
                      "leftBorder",
                      "rightBorder",
                      "separator",
                      "noBorder",
                      "allBorder",
                      "outsideBorder",
                      "thickBoxBorder",
                      "separator",
                      "bottomDoubleBorder",
                      "thickBottomBorder",
                      "topBottomBorder",
                      "topThickBottomBorder",
                      "topDoubleBottomBorder",
                      "moreBorder"
                  ]
              }
          ]
      }
  }
  
  // Add new button to config ribbon tab
  config.ribbon[0].buttonGroups.unshift(customCommand);
  
  designer.setConfig(config);

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

  If you still face any issues or your implementation differs from ours, kindly share us a minimal working sample replicating the issue. You may also fork the above sample and share it with us.

  References:

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

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

  Designer Add A button: https://www.grapecity.com/spreadjs/docs/spreadjs_designer_component/customizations/add_button_in_tab

  Designer Customizations: https://www.grapecity.com/spreadjs/docs/spreadjs_designer_component/customizations

  Regards,

  Ankit

  

• 

  kevin.calderon

  • Post Options:
  • Link
    Copy

  Posted 6 July 2023, 2:44 am EST

  Thanks that worked, I just added the following lines to the children object of my JSON configuration file:

  {
                  "command": "border",
                  "type": "dropdown",
                  "children": [
                    "bottomBorder",
                    "topBorder",
                    "leftBorder",
                    "rightBorder",
                    "separator",
                    "noBorder",
                    "allBorder",
                    "outsideBorder",
                    "thickBoxBorder",
                    "separator",
                    "bottomDoubleBorder",
                    "thickBottomBorder",
                    "topBottomBorder",
                    "topThickBottomBorder",
                    "topDoubleBottomBorder",
                    "moreBorder"
                  ]
                }

  Just as a follow up question, where can I find all the command names and options that I can use in the JSON file?

  Thanks in advance!

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 July 2023, 7:43 am EST

  Hi Kevin,

  You could refer to the following API through which you could get all the Designer’s command name: https://www.grapecity.com/spreadjs/api/v16/designer/classes/GC.Spread.Sheets.Designer.CommandNames

  Further to get all the Designer’s options, you could refer to the following options available to the ButtonGroups: https://www.grapecity.com/spreadjs/api/designer/interfaces/GC.Spread.Sheets.Designer.IButtonGroup

  You could refer to the following IComponentBaseOption Interface which is the base for all other options: https://www.grapecity.com/spreadjs/api/designer/interfaces/GC.Spread.Sheets.Designer.IComponentBaseOption

  Designer Customizations: https://www.grapecity.com/spreadjs/docs/spreadjs_designer_component/customizations

  Regards,

  Ankit