JSFiddle - React, Tailwind, and code Playground

by korchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<div id="grid" data-columns='["comment"]' data-bind="source: comments, invisible: empty" data-role="grid"></div>

<button data-bind="click: add">add comment</button>

CSS

.selected{
  background: red;
  color: white;    
}

JavaScript

var viewModel = kendo.observable({
    comments: [],
    empty: function() {
        return this.get("comments").length == 0;
    },
    add: function() {
        this.comments.push( { comment: "New comment" } );
    }
});
        
kendo.bind(document.body, viewModel);