Как использовать несколько KendoListBox со связанными друг с другом

Question

Я хочу, чтобы попытаться создать несколько списков, его работоспособность перетаскивания и перетаскивания обратно в основной список.

но когда я пытаюсь выбрать из 2-го блока в основной блок, кнопка не активируется

весь процесс, подобный этому, когда я нажимаю кнопку передачи на кнопку, мне следует спросить, где должна быть передача, с 3 переключателями.

Заранее спасибо

$("#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

Чтобы включить кнопки панели инструментов в других списках, вы должны указать опции toolbar и connectWith для каждого из них.

В своем фрагменте кода для первого списка вы присвоили массив идентификаторов для опции connectWith, которая недопустима в соответствии с документом API на веб-сайте кендо. Ваш параметр draggable для первого списка также содержит недопустимый набор функций для свойства placeholder.

Более того, если реализация будет одинаковой для всех, вам не нужны отдельные функции-заполнители (например, customPlaceholder2 и customPlaceholder3).

Поправьте меня, если я ошибаюсь, но я не думаю, что в кендо есть какие-либо встроенные функции для виджета со списком, когда всплывающее окно с переключателями спрашивает, куда переместить элемент из списка. Пожалуйста, укажите любую ссылку или источник, если вы видели что-то подобное.

Я создал демо, которое частично показывает, что вам нужно.

См. Демонстрацию

Дайте мне знать, если это поможет.