JSFiddle - React, Tailwind, and code Playground

by jc4rp3nt3r

HTML

<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css">
<script src="https://rawgithub.com/jc4rp3nt3r/kendoMultiSelectCheckBox/master/kendo.multiSelectCheckBox.js"></script>
<input id="txtDemo" value="1,3,5" />

CSS

.k-list-container .k-item {
    cursor: pointer;
}

.k-list-container .k-item .k-icon {
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    border-bottom: 1px solid #444;
    border-right: 1px solid #444;
    margin-right: 4px;
    width: 15px;
    height: 15px;
    
}
.k-i-blank {
    background-position: -99px -99px;
}

JavaScript

$(function() {
    $("#txtDemo").kendoMultiSelectCheckBox({
            dataTextField: 'name',
            dataValueField: 'id',
            dataSource: new kendo.data.DataSource({
                data: [
                    { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' }, { id: 6, name: 'Item 6' }, { id: 7, name: 'Item 7' }, { id: 8, name: 'Item 8' }, { id: 9, name: 'Item 9' }, { id: 10, name: 'Item 10' }
                ]
            }),
            value: $("#txtDemo").val().split(",")
        });
});