JSFiddle - React, Tailwind, and code Playground

by Joel D'Souza

HTML

<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.blueopal.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.1/papaparse.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="grid"></div>
<textarea id="input" placeholder="String input" style="height: 100px; width: 400px;">ItemId,Description,VendorPartId,VendorPrice
1002183,"Rack, Rolling",RC52,49
1002365A,FASTENER,PF2,3.25</textarea>
<br />
<input type="file" id="files" multiple>
<br />    
<button id="load-grid">Load</button>

JavaScript

function debugLog(msg)
{
	if (msg)
		console.log(msg);
	console.log("       Time:", (end-start || "(Unknown; your browser does not support the Performance API)"), "ms");
	console.log("  Row count:", rowCount);
	if (stepped)
		console.log("    Stepped:", stepped);
	console.log("     Errors:", errorCount);
	if (errorCount)
		console.log("First error:", firstError);
}

function loadInput() {
    var input = $("#input").val();
    var results = CSVParser.parse(input, config);
    loadGrid(results);
}

function loadGrid(results) {
    console.log(results);
    $("#grid").kendoGrid({
        dataSource: {
            data: results.data,                            
            pageSize: 20,
            batch: true
        },
        toolbar: ["create", "save", "cancel"],
        height: 300,
        scrollable: true,
        sortable: true,
        filterable: { mode: "row" },
        pageable: {
            input: true,
            numeric: false
        },
        editable: true
    });
}

$(document).ready(function() {
    var CSVParser = Papa;
    var crudServiceBaseUrl = "http://internalapi.local.spendboss.com";
    var config = {
        header: true,
        dynamicTyping: true,
        complete: loadGrid
    };
    
    var dataSource = {
        transport: {
            create: {
                url: crudServiceBaseUrl + "/Items/BatchCreate",
                dataType: "json"
            },
            update: {
                url: crudServiceBaseUrl + "/Items/BatchUpdate",
                dataType: "json"
            }
        }
    };
    
    $("#load-grid").click(function() {
        var results = $('#files').parse({config: config});
        console.log(results);
        $("#grid").kendoGrid({
            dataSource: {
                data: results.data,                            
                pageSize: 20,
                batch: true
            },
            toolbar: ["create", "save", "cancel"],
            height: 300,
            scrollable:...