Simple dropdown with enable and disable dropdown option. This feature used to disable some option from dropdown for role based user or to disable some option from option list.
Example: If there is some future feature option added in option list but not in use then to disable use this dropdown.
There are two dropdowns reusable web block added in this component.
A. GradINOUTDropDown:
Simple dropdown with enabled and disabled option list which is used to single selection from option list.
Input parameters: -
Parameter
Use
DropDownInputList
All item needs to render as option list which includes enabled and disabled choices
DisableOptionList
List of option which need to show as disabled inside dropdown which is non-selectable to end user
fontcolor
Disabled option hex colour value for font eg. "#0222f4"
backgroundcolor
Disabled option hex color value for background color eg. "#a7aaad"
IsDisabledOptionFirst
Show disabled option first in the list, default value is false
Event:-
SelectedOption:- This return the selected option Id from component.
Example of component and use
From above added image, Gray out background coloured option is disabled and rest can be selectable.
How to use:
1.Drag and drop web block inside container
2.Passing option list parameter
3.Pass colour & Disabled Option first:
B. GradeINOUTMultiSelectDropdown
Simple multiselect dropdown with enabled and disabled option list which is used to multiple selection from option list.
MultiSelectOptions
Option list with IsSelected property.if IsSelected as false then checkbox next to item is clickable.If IsDisbale property is true then item in option list is disabled(non clickable)
Disabled option hex color value for font eg:#0222f4
Disabled option hex color value for background color eg:#0222f4
MultiSelectedDeselectedList:- This event return the all option list which contains selected and deselected option as result
Here in above image gray out option from list are disabled and rest are selectable.User can select multiple option.Also selected item count is visible as prompt inside input box where user may enter character to search from list.
Created same data typle list in parent screen, loaded data inside list and used to pass to component.
3.Pass colour:
4.Event