304
Views
3
Comments
Solved
Set some options not selectable in dropdown

Hi all,

For a reactive app I need to implement a dropdown where all options are shown but only a limited set of them are selectable.

How can this be achieved?

UserImage.jpg
Daniele Betti
Solution

I found a solution using a JS as done in one of the Forge component: "EnableDisableDropdownOption_gradout"

For each option to be disabled it set:

ddrId[i].setAttribute("disabled", "true"); 

ddrId[i].setAttribute("style", "color:"+$parameters.fontcolor+";background-color:"+$parameters.backgroundcolor+";");

This has solved my question.

Thank you all.

2023-08-28 09-08-29
Venkatesh Sundarajan

Hi Daniele,

Assuming you know the values which are selectable and which are not selectable, you can try by throwing the message on the select event of the dropdown widget stating "this value cannot be selected"  when user selects the not allowed value.

You can have a list of selectable options (ids) in a local list variable and in this list you can filter the value user selected, If that ID present in this list you can allow for the success flow or you can restrict by nullifying the selected id. If it's not present you can throw the message as mentioned above.

May be this helps you! but I don't know now the best solution. Kindly try if it suits you.

Thanks.


2022-09-29 10-53-19
José Campos

Hi @Daniele Betti,


I strongly recommend searching in the Forge for components that already do what you ask.

I personally have not found any, but you can look anyway.

As a last resort, you can use this component:

https://www.outsystems.com/forge/component-overview/8392/multi-select-checkbox-reactive-web-application

Then you can edit to your needs. For example, add an IsSelectable column to the structure. Then in the Widget Tree, make the checkboxes Enable property accordingly to the IsSelectable value.


Cheers.

UserImage.jpg
Daniele Betti
Solution

I found a solution using a JS as done in one of the Forge component: "EnableDisableDropdownOption_gradout"

For each option to be disabled it set:

ddrId[i].setAttribute("disabled", "true"); 

ddrId[i].setAttribute("style", "color:"+$parameters.fontcolor+";background-color:"+$parameters.backgroundcolor+";");

This has solved my question.

Thank you all.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.