JSFiddle - React, Tailwind, and code Playground

by Archie

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.silver.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>
 <div id="listView" class="k-listview" style="width:250px;height:350px;overflow-y:scroll;">  </div>

<script type="text/x-kendo-tmpl" id="myTemplate">
    
    <div class="item click" data="${ProductID}">
        <input type="checkbox" class="click" />
        <span class="checkbox">#:ProductName#</span>
    </div>
</script>

JavaScript

$(document).ready(function () {
        
          
     var dataSource = new kendo.data.DataSource({
                  transport: {
                      read: {
                         url: "http://demos.kendoui.com/service/Products",
                            dataType: "jsonp"
                      }
                 }
                });
          $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#myTemplate").html()),
              headertemplate:"<div class='item click' id='headerTemp' data='*'>       <input type='checkbox' class='click' /><span class='checkbox'>All</span></div>"
            });


        });