How to add split dropdown button on the ribbon tool bar

How to add split dropdown button on the ribbon tool bar

Posted by: srayaprolu on 5 October 2025, 9:44 pm EST

• 

  srayaprolu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 October 2025, 9:44 pm EST - Updated 5 October 2025, 9:49 pm EST

  Hi, I am SpreadJS 18, I am looking to implement split dropdown, can you please post an example for that use case.

  PS: I am specifically looking for implementation where actual button is clickable and also with a dropdown, like in the screenshot attached. Sum Button works and dropdown has options too.

  

• 

  srayaprolu

  • Post Options:
  • Link
    Copy

  Posted 5 October 2025, 9:59 pm EST - Updated 5 October 2025, 10:04 pm EST

  

  623×697 46.4 KB

  I was able to achieve this on the sandbox, but on my application I am seeing that button is disabled. Does this not work with custom buttons?

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 6 October 2025, 6:04 am EST

  Hi,

  As I understand, you want to add a dropdown where both the button and the dropdown items are clickable and can perform actions, similar to the “Sum” example shown in your image.

  You can achieve this by defining commands for both the button and the dropdown items to perform the desired actions. Please refer to the attached sample: https://jscodemine.mescius.io/share/2AFVQcrfg0KHWZyaISMj4g/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  "children": [
      {
          "direction": "vertical",
          "children":["customCommand1", "customCommand2"],
          "command": "customCommand",
          "type": "dropdown"
      }
  ]

  Regarding your comment, “I was able to achieve this on the sandbox, but in my application the button is disabled. Does this not work with custom buttons?” — yes, this works with custom buttons as shown in the above sample.

  If it’s not working on your end, to assist you better, could you share a minimal working sample along with the steps to reproduce the issue, or modify the existing sample to replicate the behavior? Additionally, a GIF or video demonstrating the problem would be very helpful for thorough investigation.

  Regards,
  
  Priyam