As far as I can see, Kendo UI React has no "itemDisabled" prop for "DropDownList", but in Angular version it has. Will it be implemented in React?
For now, I've created such workaround. But there is one drawback: the dropdown after choosing disabled item is closed. How to avoid it?
Thanks in advance.
P.S.: here you use "renderValue", but in the demo on stackblitz you use "itemRender". Please, fix it.
5 Answers, 1 is accepted
Rank 1
Thank you for the provided example.
This can be achieved by programmatically controlling the opened property of the DropDown on the onOpen and onClose events. If a disabled item is clicked the DropDown opended state will not be changed. I added this to the provided example:
https://stackblitz.com/edit/react-dropdown-list-with-disabled-items-xdq65x?file=app/main.js
https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownListProps/#toc-onopen
https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownListProps/#toc-onclose
https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownListProps/#toc-opened
Also, I have created a feature request for the built-in feature, so the community can vote for it:
https://feedback.telerik.com/kendo-react-ui/1398617-disabled-items-dropdown-list
The valueRender is for the selected value shown in the DropDown and the itemRender is for the items inside the list.
Regards,
Stefan
Progress Telerik
Rank 1
Thanks a lot for the demo.
But there are some drawbacks in it: after a disabled item clicked, you can't close the dropdown clicking outside of it. The same is if you click "Choose..." option after it. And if you choose "Germany", for instance, then click on "Russia" and then click on "Choose...", the dropdown also doesn't close, but the value changes. As far as I can see, after `this.isDisabledSelected` is set, onClose can't handle the click, it doesn't react on it at all. Is it possible to fix this behavior?
Thanks in advance.
Thank you for the feedback for the approach.
It can be improved by setting the flag to false inside a timeout instead of in cases where the non-disabled item is clicked. This will ensure that it will be true only at the moment of clicking a disabled item.
Please test it and advise if it is working better or there is a case which I overlooked:
https://stackblitz.com/edit/react-dropdown-list-with-disabled-items-xdq65x?file=app/main.js
onChange = event => { const { value } = event.target; if (value.itemDisabled) { this.isDisabledSelected = true; setTimeout(() => { this.isDisabledSelected = false; }) return; } this.setState({ value });};Regards,
Stefan
Progress Telerik
Rank 1
Hi Mikey,
Currently, the MutliSelectTree component does not support disabling the checkbox per item, but you can log a feature request in our public repository, so that other developers can vote for it:
One thing that I could suggest is to add some flag in the item and when the MutliSelectTree is rendered, you can hide the checkboxes with JavaScript (getting the items reference using the added flag, which could be a class name for example).
Rank 1