Post
Ask Question

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.
  1. function bindddlMultiSkill()  
  2. {  
  3.     $("#ddlMultiSkill").kendoDropDownList({  
  4.         name: "skill",  
  5.         dataTextField: "SkillName",  
  6.         dataValueField: "SkillId",  
  7.         dataSource: SkillData,  
  8.         filter: "contains",  
  9.         template: "<input type='checkbox' id='chk_skill_#=data.SkillId #' class='clsSkillInner' value='#=data.SkillId #' name='skill' />" + " " + "${ data.SkillName }",  
  10.         close: onClose,  
  11.         dataBound: onSkillBound  
  12.     }).data("kendoDropDownList");   
  1. function onSkillBound(e) {  
  2.     var msg = SkillCount > 0 ? SkillCount + ' Skills Selected' : 'Select Skill';  
  3.     e.sender.text(msg);  
  4.     $(".clsSkillInner").on("click", function (e) {  
  5.         var obj = this;  
  6.         var id = $(obj).attr('id');  
  7.         var name = $(obj).attr('name');  
  8.         var value = $(obj).attr('value');  
  9.         var IsChecked = $(obj).is(':checked');  
  10.         var hf = $("#hf_" + name).get(0);  
  11.   
  12.         if (value != 0) {  
  13.             UpdateIdInHiddenField(hf, value, IsChecked);  
  14.   
  15.             var totalchk = $('input[id*="chk_' + name + '"]').not("#chk_" + name + "_0").length;  
  16.             var checkedchk = $('input[id*="chk_' + name + '"]:checked').not("#chk_" + name + "_0").length;  
  17.   
  18.             if (totalchk == checkedchk) {  
  19.                 $("#chk_" + name + "_0").prop("checked", true);  
  20.             }  
  21.             else {  
  22.                 $("#chk_" + name + "_0").prop("checked", false);  
  23.             }  
  24.             SkillCount = $("#hf_skill").val().split(',').length - 2;  
  25.         }  
  26.         else {  
  27.             $.each(SkillData, function (index, data) {  
  28.                 if (data.SkillId != '0') {  
  29.                     if (IsChecked == true) {  
  30.                         $('input[id*="chk_skill_' + data.SkillId + '"]').prop("checked", true);  
  31.                         UpdateIdInHiddenField(hf, data.SkillId, IsChecked);  
  32.                     }  
  33.                     else {  
  34.                         $('input[id*="chk_skill_' + data.SkillId + '"]').prop("checked", false);  
  35.                         UpdateIdInHiddenField(hf, data.SkillId, IsChecked);  
  36.                     }  
  37.                 }  
  38.   
  39.             })  
  40.             SkillCount = IsChecked ? SkillData.length - 1 : 0;  
  41.         }  
  42.         IsItemChecked = true;  
  43.     });  
  44.     bindSkillChk();  
  45. }  
  1. function bindSkillChk(){  
  2.        var chkInner = $("#hf_skill").val().split(',');  
  3.        chkInner=chkInner.filter(a=>a!='');  
  4.        $.each(chkInner, function (index, data) {  
  5.            $('input[id*="chk_skill_' + data + '"]').prop("checked", true);  
  6.        })  
  7.    }  
  8.   
  9.   
  10.    function onClose(e) {  
  11.        var msg = SkillCount > 0 ? SkillCount + ' Skills Selected' : 'Select Skill';  
  12.        e.sender.text(msg);  
  13.        if (IsItemChecked == true) {  
  14.            IsItemChecked = false;  
  15.            e.preventDefault();  
  16.        }  
  17.        else {  
  18.            ShowSelectedItem();  
  19.              
  20.        }  
  21.    }  
  22.   
  23.    function ShowSelectedItem() {  
  24.        $scope.SkillList = $("#hf_skill").val();  
  25.        $scope.$apply();  
  26.    }  
  27.    var IsItemChecked = false;  
  28.    function UpdateIdInHiddenField(hf, id, IsAdd) {  
  29.        if (hf.value == "") {  
  30.            hf.value = ",";  
  31.        }  
  32.   
  33.        if (IsAdd == true) {  
  34.            if (hf.value.indexOf("," + id + ",") == -1) {  
  35.                hf.value = hf.value + id + ",";  
  36.            }  
  37.        }  
  38.        else if (IsAdd == false) {  
  39.            if (hf.value.indexOf("," + id + ",") >= 0) {  
  40.                hf.value = hf.value.replace("," + id + ",", ",");  
  41.            }  
  42.        }  
  43.   
  44.    }  
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,
 
Next Recommended Reading Text Formatting In Kendo UI Grid With Angular