Disable list items in the MultiSelect component.

Environment

Product Version	5.17.0
Product	Progress® KendoReact MultiSelect

Description

I want disable specific items based on a certain condition? For example, I want to disable the items which their text starts with the letter A, disable a specific item based on its whole text value, or disabled an item based on its id value.

Solution

This is an alternative solution for the approach used in the documentation. The following implementation also shows how to keep the Popup open when the disabled item is clicked.

You can achieve this using the itemRender property where you can set the CSS styles pointer-events: none and opacity: 0.7 for certain items. In addition, when clicking on a disabled item, the click event will happen on the

element ( k-list-ul ) and this would close the Popup by default. Therefore, it is required to handle the component in controlled mode such that the onClose event does not close the component when the item returned in the SyntheticEvent is k-list-ul.

This is an example demonstrating this implementation where the Albania item is disabled:

Change Theme
Theme
Loading ...