JSFiddle - React, Tailwind, and code Playground

by matbeard

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdn.kendostatic.com/2013.3.1316/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//cdn.kendostatic.com/2013.3.1316/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2013.3.1316/styles/kendo.bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div id="grid"></div>
<script type="text/x-kendo-template" id="popupEditor" >
    <div class="container">
		 <div class="col-md-6">   
            <div class="form-group">											
				<label for="ProductName" class="col-sm-3 control-label">Product Name</label>
				<div class="col-sm-9">
                    <input name="ProductName" data-bind="value:ProductName" type="text" class="form-control" />
                </div>
            </div>
        </div>
    </div>
</script>

CSS

.k-edit-form-container {
	width: auto;
}

JavaScript

var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
...