enableWhen Parameter

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

  • 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
  • Replied 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
  • Marked as Answer

    Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels