Syncing ListView Selection with Checkboxes in Kendo UI
Environment
Product | ListView for Progress® Kendo UI® |
Version | 2024.3.1015 |
Description
When using a ListView with checkboxes for each item, it's required to sync the checkbox state with the item selection state. Specifically, the need is to select ListView items when their corresponding checkboxes are checked, and to check these checkboxes when items are selected. This KB article also answers the following questions:
- How can I toggle ListView item selection with checkboxes?
- How to synchronize ListView selection with checkbox states?
Solution
To synchronize the selection state between ListView items and checkboxes, follow these steps:
Set the
selectable
option of the ListView to"multiple"
to allow multiple items to be selected.-
Use the
change
event of the ListView to check checkboxes based on the currently selected items. In the event handler, deselect all checkboxes, then check the checboxes based on the selected state of the items using thek-selected
class.change: function(e) { $('.k-checkbox').prop('checked', false); $('.k-selected').each((index, item) => { $(item).find('.k-checkbox').prop('checked', true); }); },
-
Attach a
click
event handler to checkboxes. In this handler, based on the checkbox state, select or deselect the corresponding ListView item.$('.k-checkbox').on('click', function(e) { let isChecked = $(this).prop('checked'); if(isChecked) { $("#listView").data("kendoListView").select($(this).closest('.k-listview-item')); } else { $(this).closest('.k-listview-item').removeClass('k-selected'); } });
To retrieve the selected items, use the
select
method of the ListView. This can be triggered by an external action, such as clicking a 'Get Selected' button.
The implementation above ensures that selecting a ListView item checks its checkbox and checking a checkbox selects the ListView item, maintaining synchronization between the two.
For a practical demonstration, refer to the example below:
<button id="btn">Get Selected</button>
<div id="listView"></div>
<script>
$('#btn').on('click', function(){
var listView = $("#listView").data("kendoListView");
var selected = listView.select();
console.log(selected.length);
})
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
}
},
pageSize: 10
});
var listView = $("#listView").kendoListView({
change: function(e){
$('.k-checkbox').prop('checked', false)
$('.k-selected').each((index, item) => { $(item).find('.k-checkbox').prop('checked', true)})
},
dataBound: function(){
var listView = $("#listView").data("kendoListView");
let sDt = "Chang";
let currentData = listView.dataSource.data()
var itemWithID = currentData.find(function (item) {
return item.ProductName === sDt;
});
listView.select($('.k-listview-content').children('[data-uid="' + itemWithID.uid + '"]'));
$('[data-uid="' + itemWithID.uid + '"] .k-checkbox').prop('checked', true)
$('.k-checkbox').on('click', function(e){
let isChecked = $(this).prop('checked')
if(isChecked){
$("#listView").data("kendoListView").select($(this).closest('.k-listview-item'))
}else{
$(this).closest('.k-listview-item').removeClass('k-selected')
}
})
},
dataSource: dataSource,
selectable: "multiple",
template: "<div><input class='k-checkbox k-checkbox-md k-rounded-md' type='checkbox' />#:ProductName#</div>"
}).data("kendoListView");
</script>