enableWhen Parameter

enableWhen Parameter

Posted by: m.holland-moritz on 16 February 2021, 11:47 pm EST

• 

  m.holland-moritz

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 February 2021, 11:47 pm EST

  Hello again,

  i am still working on a custom dialog for the SpreadJS designer component.
  
  I want to disable and enable components in the dialog depending on which radio option is checked.

  Example:

  Radio Option 1: Enable the RangeSelect component and disable all TextEditors

  Radio Option 2: Enable all TextEditors (for input of source column, start row and ending row) and disable the RangeSelect component

  I saw that the ComponentBaseOption has a parameter enableWhen, but it wants a string?
  
  How does that parameter work? I cant find anything about it.
  
  Or do i have to do a work arround somewhere else?

  Thats my template:

  var testTemplate = {
      title: dict.templ_T_Ti,
      content: [
          {
              type: "ColumnSet",
              children: [
                  {
                      type: "Column",
                      children: [
                          {
                              //Typical RangeSelect
                              type: "RangeSelect",
                              titel: "Select Range",
                              bindingPath: "targetRange"
                          }, {
  
                              type: "TextEditor",
                              bindingPath: "firstColumn"
                          }, {
  
                              type: "TextEditor",
                              bindingPath: "firstRow"
                          }, {
  
                              type: "TextEditor",
                              bindingPath: "lastColumn"
                          }, {
  
                              type: "TextEditor",
                              bindingPath: "lastRow"
                          }, {
                              type: "Radio",
                              columnCount: 1,
                              items: [
                                  {
                                      text: "Rangeselect:",
                                      value: "rangeSelectOption"
                                  },
                                  {
                                      text: "Quellspalte:",
                                      value: "textEditorOption"
                                  }
                              ],
                              bindingPath: "radio"
                          },]
                  }]
          }]
  }
  

  Regards
  
  Maik

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 17 February 2021, 9:14 pm EST

  Hi Maik,

  We are unable to achieve the required functionality using the current public API hence we have escalated this issue to the concerned team for further investigation. We will update you regarding this as soon as we get any information. The internal ID for this issue will be SJS-7642.

  Regards
  
  Avinash

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 22 February 2021, 10:48 pm EST

  Hi Maik,

  The Dev team informed us that you may need to bind the enableWhen property to the binding path of a radio button. Please refer to the following code snippet and attached sample that demonstrates the same.

  
  content: [
          {
              type: "ColumnSet",
              children: [
                  {
                      type: "Column",
                      children: [
                          {
                              type: "RangeSelect",
                              title: "Select Range",
                              enableWhen: 'selectType=range',
                              bindingPath: "targetRange"
                          }, {
  
                              type: "TextEditor",
                              enableWhen: 'selectType=quell',
                              bindingPath: "firstColumn"
                          }, {
  
                              type: "TextEditor",
                              enableWhen: 'selectType=quell',
                              bindingPath: "firstRow"
                          }, {
  
                              type: "TextEditor",
                              enableWhen: 'selectType=quell',
                              bindingPath: "lastColumn"
                          }, {
  
                              type: "TextEditor",
                              enableWhen: 'selectType=quell',
                              bindingPath: "lastRow"
                          }, {
                              type: "Radio",
                              columnCount: 1,
                              items: [
                                  {
                                      text: "Range Select:",
                                      value: "range"
                                  },
                                  {
                                      text: "Quell Spalte:",
                                      value: 'quell'
                                  }
                              ],
                              bindingPath: "selectType"
                          },]
                  }]
          }]
  
  

  Regards
  
  Avinash
  
  custom_template.zip

• 

  m.holland-moritz

  • Post Options:
  • Link
    Copy

  Posted 4 March 2021, 6:38 pm EST

  Hello Avinash,

  at first thanks for the help! I got another question for the enableWhen parameter.
  
  Can i somehow bind it to two or more diffrent bindingPaths?

  For example: There is a radio button A, which enables a checkbox and only if the radiobutton A is pressed and the checkbox is checked it enables.

  I already tried , ; & and &&. Nothing worked there.

  Regards
  
  Maik

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 7 March 2021, 5:07 pm EST

  Hello Maik,

  We are also observing the same issue hence we inquired regarding the same to the dev team. We will update you once we have any information from the team.

  Regards
  
  Avinash