Kendo UI CheckBox List Widget

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<div id="checkBoxList"></div>

<div id="results">
  <div id="events">
    <b>Events</b>
    <div id="console">
    </div>
  </div>
</div>

<div style="margin-top:20px;">
  <span>Learn about this fiddle at:</span>
  <a href="http://jsdev.wikidot.com/blog:6" target="_top">Creating a Kendo UI CheckBox List Widget</a>
</div>

CSS

#results, #events {
  margin-top: 20px;
}

#console > div {
  margin-bottom: 10px;
}

JavaScript

/* CheckBox List Widget */

/// <summary>Kendo UI CheckBox List Widget.</summary>
/// <description>Kendo UI  widget that displays a list of checkboxes.</description>
/// <version>1.0</version>
/// <author>John DeVight</author>
/// <license>
/// Licensed under the MIT License (MIT)
/// You may obtain a copy of the License at
/// http://opensource.org/licenses/mit-license.html
/// </license>


/* Helper functions */

function appendConsole() {
	/// <summary>Add messages to a div to demonstrate the event handlers.</summary>
  
  var $console = $("#console"),
      html = "";

  for (var idx = 0; idx < arguments.length; idx++) {
    html += kendo.format("<div>{0}</div>", arguments[idx]);
  }

  $console.append(kendo.format("<div>{0}</div>", html));
}



/* Implement the ExtRadioButtonGroup Widget */

// Define some data for the Widget
var data = [{
  id: 1, name: "Cat"
},{
  id: 2, name: "Dog",
},{
  id: 3, name: "Bird"
}];

// Initialize the kendoExtRadioButtonGroup.
var checkBoxList = $("#checkBoxList").kendoExtCheckBoxList({
  dataSource: data,
  dataValueField: "id",
  dataTextField: "name",
  orientation: "horizontal",
  dataBound: function () {
    appendConsole("Event: dataBound");
  },
  select: function (e) {
    appendConsole("Event: select", kendo.format("id: {0}, value: {1}, is checked: {2}<br/>", e.item.id, e.item.name, e.checked));
  }
}).data("kendoExtCheckBoxList");

// Set the selected checkboxes.
checkBoxList.value(["1", "3"]);