Select Items Only with Mouse
Environment
Product | Progress® Kendo UI® ListView for jQuery |
Product Version | Created version 2018.1.117 |
Description
How can I allow the users to select or deselect ListView items only with the mouse?
Solution
- Handle the
mousedown
event for the ListView component. - Prevent the
click
event for the items in the ListView. - Check the clicked target and if it is a ListView item, keep it in an array. If the item is already selected, remove it from the array.
- Call the
select()
method with the populated array of items.
<div class="demo-section k-content wide">
<div id="listView"></div>
<div id="pager" class="k-pager"> </div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="https://demos.telerik.com/kendo-ui/content/web/foods/#:ProductID#.jpg" alt="#:ProductName# image" />
<h3>#:ProductName#</h3>
</div>
</script>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 15
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#listView").kendoListView({
dataSource: dataSource,
selectable: "multiple",
dataBound: onDataBound,
change: onChange,
template: kendo.template($("#template").html())
});
function onDataBound() {
console.log("ListView data bound");
}
function onChange(e) {
var data = this.dataSource.view();
var selected = $.map(this.select(), function (item) {
return data[$(item).index()].ProductName;
});
console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
$("#listView").on("mousedown", function (e) {
// get item if the user clicked on an item template
var clickedItem = $(e.target).closest("div.product");
// prevent click event for item elements
clickedItem.on("click", function (e) {
e.stopPropagation();
});
if (clickedItem.length > 0) {
var listView = $("#listView").getKendoListView();
var selectedItems = listView.select();
if (clickedItem.hasClass("k-selected")) {
// if item is already selected - remove it from collection
selectedItems.splice($.inArray(clickedItem[0], selectedItems), 1);
} else {
selectedItems.push(clickedItem);
}
// unbind "change" event to prevent multiple calls
listView.unbind("change");
listView.clearSelection();
listView.bind("change", onChange);
listView.select(selectedItems);
}
});
});
</script>
<style>
.product {
float: left;
width: 220px;
height: 110px;
margin: 0;
padding: 5px;
cursor: pointer;
}
.product img {
float: left;
width: 110px;
height: 110px;
}
.product h3 {
margin: 0;
padding: 10px 0 0 10px;
font-size: .9em;
overflow: hidden;
font-weight: normal;
float: left;
max-width: 100px;
text-transform: uppercase;
}
.k-pager {
border-top: 0;
}
.demo-section .k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>