JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
     
    <script src="jquery-1.8.2.js"></script>
    <script src="source/kendo.all.js"></script>
    <link href="styles/kendo.common.css" rel="stylesheet" />
    <link href="styles/kendo.default.css" rel="stylesheet" />

	<!-- hojas de estilo server -->
	<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet">
	<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.blueopal.min.css" rel="stylesheet">
	
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>		    
    
	<script type="text/javascript">
	
		//global variables
		var noregistro_var=0; 

		var value_OrderID;
		var value_OrderDate;
		var value_OrderDate_dp;
		
		function PasarDetalleContacto(){

			//send values to form fields
			form1.OrderID.value			=value_OrderID;
			form1.OrderDate.value		=value_OrderDate;
			form1.OrderDate_dp.value	=value_OrderDate_dp;
		}
	</script>	
</head>
<body>
    
        <div id="example" class="k-content">
            <div id="grid"></div>
            
			<!-- begin form  -->
	            <h3><div id="tituloTexto"></div></h3>
	            <form action='' method='POST' name='form1' id='form1'>
		            <ul>
		            	<li>
		            		<label for="OrderID" class="required" style="width:200px;">OrderID</label>
		            		<input type="text" id="OrderID" name="OrderID" class="k-textbox" value="" readonly/>
		            	</li>
		            	<li>
		            		<label for="OrderDate" class="required" style="width:200px;">OrderDate</label>
		            		<input  type="text" id="OrderDate" name="OrderDate" class="k-textbox" value="" readonly>
		            	</li>
		            	<li>
		            		<label for="OrderDate_dp" class="required" style="width:200px;">OrderDate_dp</label>
		            		<input type="cargarOrderDate" id="cargarOrderDate"...

JavaScript

$(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        OrderID: { type: "number" },
                                        Freight: { type: "number" },
                                        ShipName: { type: "string" },
                                        OrderDate: { type: "date" },
                                        ShipCity: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 250,
                        filterable: true,
                        sortable: true,
                        pageable: true,
                        selectable: true,
                        change: onChange,
                        columns: [{
                                field:"OrderID",
                                filterable: false
                            },
                            "Freight",
                            {
                                field: "OrderDate",
                                title: "Order Date",
                                width: 100,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "ShipName",
                                title: "Ship Name",
                                width: 200
                       ...