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"></div>

CSS

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

JavaScript

$("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: {
                    url: '/echo/json/',
                    dataType: "json",
                    type: "POST",
                    data: { 
                        json: kendo.stringify({
                            data:  [ {
                                  QuoteDateString: "1/1/2012",
                                  PriceString: "",
                                  PricedDateString: "",
                                    Quantity: "",
                                    Customer: "",
                                    PriceType: "",
                                    QisStatus: "",
                                    QisType:"",
                                    PricingSource:"",
                                    Estimator:"",
                                    ProcurementCode:"",
                                    Qis: "",
                                    Rolt:"",
                                    RequestedPartNumber:"",
                                    AckCodes:"",
                                    NotesUrl:""
                               } ]
                           })
                    }
                }
            },
            pageSize: 15,
            schema: {
                data: "data",
                total: "total"
            }
        },
        columns: [
            { field: "QuoteDateString", title: "Date", width: "60px" },
            { field: "PriceString", title: "Price", width: "110px" },
            { field: "PricedDateString", title: "Priced Date", width: "80px" },
            { field: "Quantity", title: "Quantity", width: "60px" },
            { field: "Customer", title: "Customer" },
            { field: "PriceType", title: "Price Type" },
            { field: "QisStatus", title: "QIS Status" },
            { field: "PricingSource", title: "Pricing Source" },
            { field:...