Kendo UI Checkbox

A custom Kendo UI checkbox widget

by Josh Eastburn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="24" height="48">
  <rect fill="#ffffff" x="0" y="0" width="24" height="48" id="svg_1" stroke="#f4f4f4" stroke-width="0"/>
  <rect id="svg_4" height="23" width="23" y="0.5" x="0.5" fill-opacity="0" stroke="#cdcdcd" fill="#000000"/>
  <line id="svg_3" y2="5.05" x2="19" y1="19.05" x1="5" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="4" fill="none" stroke="#00007f"/>
  <rect height="23" width="23" y="24.5" x="0.5" fill-opacity="0" stroke="#cdcdcd" fill="#000000" id="svg_5"/>
  <line y2="5.05" x2="19" y1="19.05" x1="5" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="4" fill="none" stroke="#00007f" id="svg_6" transform="rotate(90 12 12.05)"/>
</svg>

<select data-role="dropdownlist" data-bind="source: dropDownData"></select>
<div id="log" class="log"></div>

CSS

.log {
    background-color: #eee;
    margin: 20px 0;
}

JavaScript

(function () {
    var log = (function (el) {
        return function (text) {
            el.html(el.html() + '<br/>' + text);
        };
    })($('#log'));

    var viewModel = kendo.observable({
        dropDownData: ['KendoUI is loaded!']
    });

    log('example log message');

    kendo.bind('body', viewModel);

})()