Custom Buttons in dialog

Custom Buttons in dialog

Posted by: m.holland-moritz on 25 March 2021, 7:46 pm EST

• 

  m.holland-moritz

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 March 2021, 7:46 pm EST

  Hello Support Team,

  i created a dialog for the SpreadJS Designer. In this dialog i insert a IButtonOption. This button should make some additional options visible.

  I took a look at the “FindDialogInput”. There is a button what is doing exactly this, but it has a bindingPath, which returns true or false somehow. A “normal” button doesn’t do that by it’s own. I assume that is, because it has not a normal buttontype. (“FindSwitchButtonEditor”)

  I found all parameters i can use for a IButtonOption, but i can’t find where i can put the function that returns true or false or even a whole function, that does something with all the variables used in the dialog (inputfields etc.)

  Regards
  
  Maik

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 30 March 2021, 11:50 pm EST

  Hi Maik,

  We are sorry but this is currently not supported as the default behavior. I’ve prepared a sample to demonstrate how you could create a custom component to achieve the required functionality. Please refer to the following sample and let me know if you face any issues:
  
  https://codesandbox.io/s/spread-js-starter-forked-e99n5?file=/src/index.js

  Regards
  
  Sharad

• 

  m.holland-moritz

  • Post Options:
  • Link
    Copy

  Posted 10 October 2021, 6:42 pm EST

  Hello again,
  
  that definitely helped me before, but i did an Update from 14.0.1 to 14.2.0 and now it doesn’t work anymore. I created a Custom Component and it even tells me that the registration of that component was successful, but when i try to use it, it just doesn’t show up.

  Here my Code:

  The Class:

  class MyCustomClickButtonComponent {
      constructor(spread) {
          this.context = spread;
          this.name = "MyCustomClickButtonComponent";
      }
  
      Render(config) {
          let btn = document.createElement("Button");
          btn.innerText = config.text || "";
          btn.style.padding = config.padding || undefined;
          btn.style.margin = config.margin || undefined;
  
          let context = this.context;        
  
          btn.addEventListener("click", function () {
              if (config.click) {
                  config.click(context, config);
              }
          });
  
          return [btn, this];
      }
  }
  

  The Registration:

  $(document).ready(function () {
      var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
  
  
      GC.Spread.Sheets.Designer.Designer.RegisterComponent(
          new MyCustomClickButtonComponent(designer)
      );
  });
  

  The Use:

  
  [...]{
  	type: "MyCustomClickButtonComponent",
          text: "Nächstes",
          width: "90px",
          margin: "0 5px 5px 5px",
          click: function (context, config) {
          	//DO SOMETHING
  	}
  },[...]
  

  Hope you can help me.

  Regards
  
  Maik

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 October 2021, 9:11 pm EST

  Hi Maik,

  From the latest version 14.2.0, we have added better support for registering custom components, I’ve modify the sample to demonstrate how we could achieve the same functionality in the latest version. Please refer to the following updated sample and let me know if you face any issue:
  
  https://codesandbox.io/s/spread-js-starter-forked-ctc9t?file=/src/index.js

  API docs:
  
  https://www.grapecity.com/spreadjs/docs/v14/online/add-custom-component.html

  Regards
  
  Sharad

• 

  m.holland-moritz

  • Post Options:
  • Link
    Copy

  Posted 12 October 2021, 7:44 pm EST

  Hey Sharad,

  this example helped me definitely. I could regain my functionalities. Thanks for the help!

  Regards Maik