How to use multiple KendoListBox with connected each other

Question

I want to try to create multiple List Box its working fine drag and drop and drag and drop back to main list Box.

but when I try to select from 2nd box to main box transfer to button not activated

whole process like this when I click on transfer to button it should me ask to where transfer there should be popup with 3 radio button.

Thank you in advance

$("#optional").kendoListBox({
            dropSources: ["selected","selected2","selected3"],
			connectWith: ["selected","selected2","selected3"],
			draggable: { placeholder: customPlaceholder,customPlaceholder2,customPlaceholder3 },
            toolbar: {
                tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
            },
			
        });

        $("#selected").kendoListBox({
            draggable: { placeholder: customPlaceholder },
            dropSources: ["optional"],
            connectWith: "optional"
        });
		$("#selected2").kendoListBox({
            draggable: { placeholder: customPlaceholder2 },
            dropSources: ["optional"],
            connectWith: "optional"
        });
		$("#selected3").kendoListBox({
            draggable: { placeholder: customPlaceholder3 },
            dropSources: ["optional"],
            connectWith: "optional"
        });
		
		function customPlaceholder(draggedItem) {
            return draggedItem
                .clone()
                .addClass("custom-placeholder")
                .removeClass("k-ghost");
        }
		function customPlaceholder2(draggedItem) {
			return draggedItem
				.clone()
				.addClass("custom-placeholder")
				.removeClass("k-ghost");
		}
		function customPlaceholder3(draggedItem) {
            return draggedItem
                .clone()
                .addClass("custom-placeholder")
                .removeClass("k-ghost");
        }

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
 <div class="demo-section k-content js-height-grey">
										<select id="optional" >
											<option>Steven White</option>
											<option>Nancy King</option>
											<option>Nancy Davolio</option>
											<option>Robert Davolio</option>
											<option>Michael Leverling</option>
											<option>Andrew Callahan</option>
											<option>Michael Suyama</option>
										</select>            
										<select id="selected"></select>
										<select id="selected2"></select>
										<select id="selected3"></select>
									</div>

Answer 1

To enable toolbar buttons on your other listboxes, you have to specify the toolbar and connectWith options for each of them.

In your code snippet, for the first listbox, you have assigned an array of ids for connectWith option which is invalid as per the API document on kendo's website. Your draggable option for the first listbox has also invalid set of functions for placeholder property.

Moreover, if the implementation would be same for all, you don't need separate placeholder functions (like customPlaceholder2 and customPlaceholder3).

Correct me if I am wrong but I don't think kendo has any built-in functionality for listbox widget where the popup with radio buttons ask where to move the item from the listbox. Please provide any link or source, if you have seen something like that.

I have created a demo which partially shows what you need.

See Demo

Let me know if that helps.