JSFiddle - React, Tailwind, and code Playground

by basmaat

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>
<div class="header">Select A Row To Edit</div>
<table>
<td>    
<ul id="panelbar">
                 <li>
                    Drinks
                    <ul>
                        <li>
                            Sales Forecasts
                            <ul>
                                <li>Tea</li>
                                <li>Coffee</li>
                                <li>Milk</li>
                                <li>Soda</li>
                            </ul>
                        </li>
                        <li>Sales Reports</li>
                    </ul>

                </li>
</ul>
</td>
<td
<table id="products">
    <thead>
        <tr>
            <th data-field="ID">ID</th>
            <th data-field="Name">Name</th>
        </tr>
    </thead>
</table>
</td>
</table>
<hr />

<dl>
    <dt>Name:</dt>
    <dd><input id="name" name="Name" /></dd>
    <dd><button id="sync">Sync</button></dd>
</dl>

<dl>
  
    <dd><button id="filter">filter: Milk</button></dd>
    <dd><button id="ResFilter">reset filter</button></dd>
</dl>

CSS

table {
    margin-bottom: 20px;
}

#name {
    height: 20px;
}

.header {
    font-weight: bold;
    margin-bottom: 20px;
}

dl {
  clear:both;
  width: 100%;
}
dt {
  font-weight:bold;
}
dd {
  float:left; 
  margin:0;
}

JavaScript

var Product = kendo.data.Model.define({
        id: "ID"
    });

    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://datasync.apphb.com/Home/Read",
                dataType:'jsonp'
            },
            update: {
                // url: url to post method
                // type: 'POST'
            }
        },
        schema: {
            model: Product
        }
    });

   $("#products").kendoGrid({
    dataSource: dataSource,
    height: 200,
    scrollable: false,
    selectable: true,
    change: function() {
        var tr = this.select();
        var id = tr.data("id");
        var model = this.dataSource.get(id);

        $("dl input").val(model.get("Name"))
            .unbind("change")
            .change(function() {
                model.set(this.name, this.value);
            });
        }
   });

 $("#panelbar").kendoPanelBar({
                        expandMode: "single",
                        select: 
                    });
                    

$("#sync").click(function() {
    dataSource.sync();
});

$("#filter").click(function() {
    dataSource.filter({ field: "Name", operator: "eq", value: "Milk"     });
});

$("#ResFilter").click(function() {
    dataSource.filter(null);
});

 $("#panelbar").kendoPanelBar({
                        expandMode: "single"
                    });