Kendo UI DropDown With Multiple Check Boxes

In this blog, I will demonstrate how to create a Multiple Selection DropDownList with the help of Kendo UI. This dropdown will allow you to select more than one item and will also show the number of checked items in a dropdown list. Ex. (2 items selected). There is an option to Select all checkboxes to check all items at a time and a Search filter is also integrated with this dropdown.

Background

Well, first of all, I am using a hidden field where I can put all the checked value with comma separated. This hidden field is used for managing all checked and unchecked values and keeps the values checked when the user opens the dropdown again.

Below is the bunch of code.

function bindddlMultiSkill()
{
$("#ddlMultiSkill").kendoDropDownList({
name: "skill",
dataTextField: "SkillName",
dataValueField: "SkillId",
dataSource: SkillData,
filter: "contains",
template: "<input type='checkbox' id='chk_skill_#=data.SkillId #' class='clsSkillInner' value='#=data.SkillId #' name='skill' />" + " " + "${ data.SkillName }",
close: onClose,
dataBound: onSkillBound
}).data("kendoDropDownList");

function onSkillBound(e) {
var msg = SkillCount > 0 ? SkillCount + ' Skills Selected' : 'Select Skill';
e.sender.text(msg);
$(".clsSkillInner").on("click", function (e) {
var obj = this;
var id = $(obj).attr('id');
var name = $(obj).attr('name');
var value = $(obj).attr('value');
var IsChecked = $(obj).is(':checked');
var hf = $("#hf_" + name).get(0);
if (value != 0) {
UpdateIdInHiddenField(hf, value, IsChecked);
var totalchk = $('input[id*="chk_' + name + '"]').not("#chk_" + name + "_0").length;
var checkedchk = $('input[id*="chk_' + name + '"]:checked').not("#chk_" + name + "_0").length;
if (totalchk == checkedchk) {
$("#chk_" + name + "_0").prop("checked", true);
}
else {
$("#chk_" + name + "_0").prop("checked", false);
}
SkillCount = $("#hf_skill").val().split(',').length - 2;
}
else {
$.each(SkillData, function (index, data) {
if (data.SkillId != '0') {
if (IsChecked == true) {
$('input[id*="chk_skill_' + data.SkillId + '"]').prop("checked", true);
UpdateIdInHiddenField(hf, data.SkillId, IsChecked);
}
else {
$('input[id*="chk_skill_' + data.SkillId + '"]').prop("checked", false);
UpdateIdInHiddenField(hf, data.SkillId, IsChecked);
}
}
})
SkillCount = IsChecked ? SkillData.length - 1 : 0;
}
IsItemChecked = true;
});
bindSkillChk();
}

function bindSkillChk(){
var chkInner = $("#hf_skill").val().split(',');
chkInner=chkInner.filter(a=>a!='');
$.each(chkInner, function (index, data) {
$('input[id*="chk_skill_' + data + '"]').prop("checked", true);
})
}
function onClose(e) {
var msg = SkillCount > 0 ? SkillCount + ' Skills Selected' : 'Select Skill';
e.sender.text(msg);
if (IsItemChecked == true) {
IsItemChecked = false;
e.preventDefault();
}
else {
ShowSelectedItem();
}
}
function ShowSelectedItem() {
$scope.SkillList = $("#hf_skill").val();
$scope.$apply();
}
var IsItemChecked = false;
function UpdateIdInHiddenField(hf, id, IsAdd) {
if (hf.value == "") {
hf.value = ",";
}
if (IsAdd == true) {
if (hf.value.indexOf("," + id + ",") == -1) {
hf.value = hf.value + id + ",";
}
}
else if (IsAdd == false) {
if (hf.value.indexOf("," + id + ",") >= 0) {
hf.value = hf.value.replace("," + id + ",", ",");
}
}
}

SkillData

It is an object of JSON Data which you will fill from the service.

like [{ SkillId: "0", SkillName: "Select All" },{ SkillId: "1", SkillName: "jquery" }, { SkillId: "2", SkillName: "angular"}]

$scope.SkillList: this is comma seprated value like hidden field ",1,2,3,4,"

SkillCount

It preserves the checked item count.

The output will be as the below screen,

3 Comments

Join the conversation! Your thoughts help the community grow.

Ravindra Pithava6y ago
Hii...In this example after selection of dropdown items, how to show selected item should show at the top of the list.
Akhil Kumar8y ago
HI Ankit Thanks for your posts. I am Manish Rana brother please make me a call/whatsapp on my number 8527927833. I need some help from you in Angular.
- Ankit Rawat8y ago
  ok--------