Sort ListBox Items on Add
Environment
Product | Progress® Kendo UI® ListBox for jQuery |
Created with version | 2017.3.1026 |
Description
How can I sort the items between connected ListBoxes when I move items from one ListBox to the other?
Solution
- To initially order the items, specify the
sort
option of the DataSource component. - To sort the items when the user drops a new item, handle the
add
event and prevent the default behavior. - Manually add the item to the respective DataSource and call the
sort()
method.
<div id="example" role="application">
<div class="demo-section k-content">
<img src="https://demos.telerik.com/kendo-ui/content/web/listbox/arrow-left2right.png" alt="drag-indicator" class="arrow" />
<br />
<select id="discontinued"></select>
<select id="available"></select>
<img src="https://demos.telerik.com/kendo-ui/content/web/listbox/arrow-right2left.png" alt="drag-indicator" class="arrow" />
</div>
</div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.DataSource({
serverFiltering: false,
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" },
}
}
}
});
var availableDS = new kendo.data.DataSource({
sort: { field: "ProductName", dir: "asc" }
});
var discontinuedDS = new kendo.data.DataSource({
sort: { field: "ProductName", dir: "asc" }
});
dataSource.fetch(function () {
var data = this.data();
var discontinuedData = [];
var availableData = [];
for (var i = 0; i < data.length; i++) {
if (data[i].Discontinued) {
discontinuedData.push(data[i]);
}
else {
availableData.push(data[i]);
}
}
availableDS.data(availableData)
discontinuedDS.data(discontinuedData);
});
$("#discontinued").kendoListBox({
draggable: true,
dataSource: discontinuedDS,
connectWith: "available",
dropSources: ["available"],
dataTextField: "ProductName",
dataValueField: "ProductID",
toolbar: {
tools: [ "transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
},
add: function (e) {
e.preventDefault();
addItems(this.dataSource, e.dataItems)
this.dataSource.sort({ field: "ProductName", dir: "asc" });
}
});
$("#available").kendoListBox({
draggable: true,
dataSource: availableDS,
connectWith: "discontinued",
dropSources: ["discontinued"],
dataTextField: "ProductName",
dataValueField: "ProductID",
add: function (e) {
e.preventDefault();
addItems(this.dataSource, e.dataItems)
this.dataSource.sort({ field: "ProductName", dir: "asc" });
}
});
function addItems(dataSource, items){
items.forEach(function(item){
dataSource.data().push(item);
})
}
});
</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: 555px;
}
#example .k-listbox {
width: 275px;
height: 310px;
}
</style>