This is a migrated thread and some comments may be shown as answers.

Adding checkboxes and select and displaying number of items selected

4 Answers 101 Views
MultiColumnComboBox
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 25 Oct 2018, 11:47 PM

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

Sort by
0
Dimitar
Telerik team
answered on 29 Oct 2018, 01:42 PM
Hello Steve,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Steve
Top achievements
Rank 1
answered on 02 Nov 2018, 04:53 PM

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

 

 

0
Dimitar
Telerik team
answered on 05 Nov 2018, 12:22 PM
Hello 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Steve
Top achievements
Rank 1
answered on 28 Nov 2018, 05:36 PM

Hi Dimitar,

 

Sorry the late reply.   I ended up switching to MultiSelect as you suggested.

 

Thanks

Tags
MultiColumnComboBox
Asked by
Steve
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Steve
Top achievements
Rank 1
Share this question
or