JSFiddle - React, Tailwind, and code Playground

by trentcioran

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.322/js/kendo.all.min.js"></script>
<div id="grid" style="margin-bottom:10px;"></div>
<div id="editor">
    <button class="k-button" data-bind="click: create">New</button>
</div>

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr entity-id="#=Id#">
        <td>
            #= Name #
        </td>
        <td>
            #= Description #
        </td>
        <td>
        # if (Parent && Parent.Name) { #
            #= Parent.Name #
        # } #
        </td>
        <td>
        # if (HasPic) { #
            <img src="Content/images/Taxonomy/#=Id#.jpg" width="20px" height="20px" />
        # } #
        </td>
         <td>
            <a class='k-button k-button-icontext delete-button' ><span class='k-icon k-delete'></span>Delete</a>
        </td>
    </tr>
</script>

JavaScript

var data = [{"Id":"4212382a-dc19-4448-a992-4f42b22eaa71","Name":"Product 1","Description":"description 1","HasPic":true,"Parent":null,"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},{"Id":"3e9ba860-e04b-4b76-bd4f-058dc224dbf7","Name":"child 1","Description":"child description 1","HasPic":true,"Parent":{"Id":"4212382a-dc19-4448-a992-4f42b22eaa71","Name":"Product 1","Description":"description 1","HasPic":true,"Parent":null,"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},{"Id":"6a69f70e-3c76-4be8-ab4b-69ec70a91eaa","Name":"child 2","Description":"child description 2","HasPic":true,"Parent":{"Id":"4212382a-dc19-4448-a992-4f42b22eaa71","Name":"Product 1","Description":"description 1","HasPic":true,"Parent":null,"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},{"Id":"2991a65d-df13-4c5f-8a8c-7f8d1b44a5fd","Name":"child 3","Description":"child description 3","HasPic":true,"Parent":{"Id":"169a34ad-4fd6-4a6a-b5f5-1587b9a846c0","Name":"Product 2","Description":"description 2","HasPic":false,"Parent":null,"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},{"Id":"169a34ad-4fd6-4a6a-b5f5-1587b9a846c0","Name":"Product 2","Description":"description 2","HasPic":false,"Parent":null,"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null},{"Id":"6d1fd45e-eba2-4837-a834-ebdf377fdc15","Name":"Product 3","Description":"description 3","HasPic":false,"Parent":null,"Attributes":null,"HasApplicationErrors":false,"HasErrors":false,"Errors":null}];

var ds = new kendo.data.DataSource({
        type: 'json',
        data: data,
        batch: false,
        schema: {
            model: {
                id:...