Below you will find the steps in order to achieve the desired behavior:
1) To be able to write in the input element that is in the dialog which contains the TreeView, you could focus the element programmatically. You could subscribe to the open event of the MultiSelect.
In the event handler you could find the input element and focus it using jQuery focus() method. As you will need to ensure that the element is rendered, you could use a setTimeout function.
I will explain the reason for 'closeAllowed
' in the next step
2) When a different element than the MultiSelect input field is focused, the MultiSelect will automacally close. This is the default behavior. To avoid that you could set a flag if the closing is allowed. Initially you could set it to true. You could prevent the closing depending on the value of the closeAllowed
So, when the input element in the dialog is focused, you will set closeAllowed
to false and prevent the closing.
3) In order to close the MultiSelect dialog, you could add a button in it. When the button is clicked you will set the closeAllowed
flag to true and will trigger the close event of the Multiselect. I am afraid that due to the focusing of the input element, implementing of such closing button is needed. At this step you could add the checked nodes to the MultiSelect input
multi = $(
checkedNodes = ;
4) To add checked nodes only when the dialog is closing, you could set additional flag. The flag will be needed for the nodes that are checked initially.
checkedNodes = ;
treeView = $(
This way, in case there are initially checked nodes, they will be marked when the dialog opens, but when the user check a node it will not be added to the MultiSelect input immediately. The additionally checked node could be added to the MutliSelect when the dialog closes (when the close button is clicked). This could be seen in step 3) marked in green.
Here is a Dojo example
where the described is implemented.