Kendo UI Starter Template

An empty fiddle with the latest Kendo UI CSS and JS references.

HTML

<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.all.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css">
<div id="example">
<div id="list" data-role="listView" data-bind="source: data">
</div>
</div>


<script id="template" type="text/x-kendo-template">
	<div>
  	<button data-bind="visible:  alreadyAttending, click: onClick">
    	Your id is ${ID} 
  	</button>
  </div>
</script>

CSS

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

JavaScript

(function() {

var data = [];
data[0] = { alreadyAttending:  true, ID:  1, onClick:  function() { alert("Click 1"); }};
data[1] = { alreadyAttending:  false, ID:  2, onClick:  function() { alert("Click 2"); }};

var viewModel = kendo.observable({
	data: data
});
kendo.bind($("#example"), viewModel)
 $("#list").kendoListView({
   dataSource: data,
   template: kendo.template($("#template").html())
 });
})();