JSFiddle - React, Tailwind, and code Playground

by riley

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<script type="text/x-kendo-tmpl" id="template"><br/>
    ${Title}    
        <table class="k-grid">
      <thead>
          <tr>
              <th data-field="title">Name</th>
              <th data-field="year">Rating</th>
          </tr>
      </thead>
      <tbody>
          #if (CatType == "Fruit") {#
          <tr>
              <td>Apples</td>
              <td>10</td>
          </tr>
          <tr>
              <td>Blueberries</td>
              <td>4</td>
          </tr>
          #}
                else {#
          
          <tr>
              <td>Carrots</td>
              <td>7</td>
          </tr>
          <tr>
              <td>Cucumbers</td>
              <td>9</td>
          </tr>
          <tr>
              <td>Celery</td>
              <td>3</td>
          </tr>
          #}#
      </tbody>
    </table>    
</script>

<div id="listView"></div>

JavaScript

$("#listView").kendoListView({
 dataSource: new kendo.data.DataSource({
            data: [
                {
                    Title: "Fruit Available:",
                    CatType: "Fruit"
                },
                {
                Title: "Veggies Available:",
                    CatType: "Veggie"
                }
                ]
        }),
    template: kendo.template($("#template").html()),
    dataBound: function() {
        $(".k-grid", this.element).each(function() {
             var dom = $(this);   
             dom.kendoGrid({                
                sortable: true
            });
        });
    }
});