Hi,
In below url code https://demos.telerik.com/kendo-ui/listbox/drag-and-drop
I am doing do some modifications
My requirement is that here i am able to drag only one dropdown. i need to drag multiple values at a time
Could you please help me
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/listbox/drag-and-drop">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" role="application">
<div class="demo-section k-content wide">
<img src="../content/web/listbox/arrow-left2right.png" alt="drag-indicator" class="arrow"/>
<br />
<select id="discontinued"></select>
<select id="available"></select>
<img src="../content/web/listbox/arrow-right2left.png" alt="drag-indicator" class="arrow"/>
<button id="save-changes-btn">Save changes</button>
</div>
</div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
serverFiltering: false,
selectable: "multiple",
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
requestStart: function () {
kendo.ui.progress($(".demo-section"), true);
},
requestEnd: function () {
kendo.ui.progress($(".demo-section"), false);
},
batch: false,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
Discontinued: { type: "boolean" },
}
}
}
});
dataSource.fetch(function () {
var data = this.data();
var discontinued = $("#discontinued").data("kendoListBox");
var available = $("#available").data("kendoListBox");
for (var i = 0; i < data.length; i++) {
if (data[i].Discontinued) {
discontinued.add(data[i]);
}
else {
available.add(data[i]);
}
}
});
$("#discontinued").kendoListBox({
selectable: "multiple",
draggable: true,
connectWith: "available",
dropSources: ["available"],
dataTextField: "ProductName",
dataValueField: "ProductID",
remove: function (e) {
setDiscontinued(e, false);
},
add: function (e) {
setDiscontinued(e, true);
}
});
$("#available").kendoListBox({
selectable: "multiple",
draggable: true,
connectWith: "discontinued",
dropSources: ["discontinued"],
dataTextField: "ProductName",
dataValueField: "ProductID"
});
$("#save-changes-btn").kendoButton({
click: function (e) {
dataSource.sync();
}
});
function setDiscontinued(e, flag) {
var removedItems = e.dataItems;
for (var i = 0; i < removedItems.length; i++) {
var item = dataSource.get(removedItems[i].ProductID);
item.Discontinued = flag;
item.dirty = !item.dirty;
}
}
});
</script>
<style>
#example .k-listbox .k-item{
cursor: move;
}
#example .arrow {
padding: 8px 0 5px 238px;
}
#save-changes-btn {
float: right;
margin-top: 20px;
}
#example .demo-section {
max-width: none;
width: 640px;
}
#example .k-listbox {
width: 275px;
height: 310px;
}
</style>
</body>
</html>
