JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script type="text/x-kendo-template" id="CheckboxTemplate">
   <input type="checkbox" name="#= text #" value="#= value #" class="check-item" #= selected ? "checked" : "" #/>
   <span> #= text # </span>
</script>

<input id="dropDownList" style="width: 200px;"/>

JavaScript

$(document).ready(function () {

    var data = [
      { text: "test1", value: "1", selected: false },
      { text: "test2", value: "2", selected: false },
      { text: "test3", value: "3", selected: true },
      { text: "test4", value: "4", selected: false }
      ];
                 
       $("#dropDownList").kendoDropDownList({
           dataTextField: "text",
           dataValueField: "value",
           template: $("#CheckboxTemplate").html(),
           dataSource: data,
           placeholder: "Select...",
            select: function(e) {
                e.preventDefault();
            }
       });
 

    $(".check-item").bind("click", function(e) {
        updateDropDown();
        
        // Remove to close dropdown after single click
        e.stopImmediatePropagation();
    });

    updateDropDown();
});

function updateDropDown()
{
    var items = "";
    $(".check-item").each(function() {
        var input = $(this);
        if(input.is(':checked'))
        {
            if(items != "")
                items += ",";
            items += $(input).next().text();
        }
    });

    $("#dropDownList").data("kendoDropDownList").text(items);
}