Hi All,
I have three questions for this requests.
1. How could I keep the MultiColumnComboBox from closing after an item is selected?
2. Could anyone provide an example of a MultiColumnComboBox with checkboxes (either the row is selected or checkbox is checked) based of
https://demos.telerik.com/kendo-ui/multicolumncombobox/index?
2. How could I display the number of items that are selected in the placeholder?
TIA,
Steve
4 Answers, 1 is accepted
1) To keep the MultiColumnComboBox popup open after selection, you could utilize the widget's select and close events as follows:
select: function(e) { e.sender.wrapper.addClass("selection");},close: function(e) { var widgetWrapper = e.sender.wrapper; if(widgetWrapper.hasClass("selection")) { widgetWrapper.removeClass("selection"); e.preventDefault(); } widgetWrapper.removeClass("selection");}2) Due to the specific rendering of the MultiColumnComboBox it is currently not possible to specify an item template or inject custom HTML into the list options. In case you think that this will bring benefit to the widget, I would suggest sharing your idea in the official Kendo UI Feedback Portal.
3) The MultiColumnComboBox allows only a single item to be selected, thus I am not quite sure that I understand the placeholder issue correctly. Could you elaborate a bit more on what is the exact use case?
Regards,
Dimitar
Progress Telerik
Rank 1
Hello Dimitar,
Thanks for the snippet code to prevent the MultiColumnComboBox from closing.
Reply to #3, it's related to question #2. Supposed, we can select multiple rows using checkboxes, it's an ideal to display the number of items selected instead of showing individual names in the placeholder. Please refer to my code below and see what I'm trying to do.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/multicolumncombobox/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<script id="tagTemplate" type="text/x-kendo-template">
#if(data.values.length == 1){#
<span> #: data.values[0]# </span>
#} else{#
<span>#: data.values.length # items are selected </span>
#}#
</script>
<script id="checkTemplate" type="text/x-kendo-template">
<input id="#=data.something#" type="checkbox" class="k-checkbox" />
</script>
<div id="example">
<div class="demo-section k-content">
<h4>Test</h4>
<input id="customers" style="width: 600px;" placeholder="# items are selected" />
<div id="ItemsSelected"></div>
</div>
<script>
var dataSource1= [
{ Id: 1, Description: "Qual_1", Number:"111", Name1:"AB", Name2:"YO" },
{ Id: 2, Description: "Qual_2", Number:"222", Name1:"SI", Name2:"KO" },
{ Id: 3, Description: "Qual_3", Number:"333", Name1:"PE", Name2:"MO" },
{ Id: 4, Description: "Qual_4", Number:"555", Name1:"WE", Name2:"DO" }];
$(document).ready(function () {
var checkInputs = function (elements) {
elements.each(function () {
var element = $(this);
var input = element.children("input");
input.prop("checked", element.hasClass("k-state-selected"));
});
};
function UpdateSelected(items){
var len = ($("input[class=cbx1]:checked").length);
var total = items.length;
var msg = len + " of " + items.length + " items are selected";
$("#ItemsSelected").text(msg);
if(len == total){
$('#checkAllQualifier').prop('checked',true);
}else{
$('#checkAllQualifier').prop('checked', false);
}
}
var multiSelector = $("#customers").kendoMultiColumnComboBox({
dataSource: dataSource1,
dataTextField: "Description",
dataValueField: "Id",
height: 400,
footerTemplate: 'Total <strong>#: instance.dataSource.total() #</strong> items found',
columns: [
{
resizable: true,
headerTemplate: '<input type="checkbox" class="cbxAll" id="checkAllQualifier" />',
template: '<input id="${data.uid}" value="${Id}" class="cbx1" type="checkbox" />',
width: 50
},
{ field: "Id", title: "Id", width: 50 },
{ field: "Description", title: "Description", width: 200 },
{ field: "Number", title: "Emp", width: 90 },
{ field: "Name1", title: "Abbrev1", width: 100 },
{ field: "Name2", title: "Abbrev2", width: 100 }
],
close: function (e) {
var widgetWrapper = e.sender.wrapper;
if (widgetWrapper.hasClass("selection")) {
widgetWrapper.removeClass("selection");
e.preventDefault();
}
widgetWrapper.removeClass("selection");
},
select: function (elem) {
elem.sender.wrapper.addClass("selection");
var items = this.ul.find("li");
checkInputs(items);
UpdateSelected(items);
}
}).data("kendoMultiColumnComboBox");
$("#checkAllQualifier").click(function(){
var chkboxes = $("input.cbx1:checkbox");
$('input:checkbox').not(this).prop('checked', this.checked);
UpdateSelected(chkboxes);
});
});
</script>
</div>
</body>
</html>
TIA,
Steve
The MultiColumnComboBox extends the ComboBox widgets and allows only a single selection from the list of options. This is described in the following articles:
I would suggest using the Kendo UI MultiSelect for scenarios where multiple selection is required:
Regards,
Dimitar
Progress Telerik
Rank 1
Hi Dimitar,
Sorry the late reply. I ended up switching to MultiSelect as you suggested.
Thanks