JSFiddle - React, Tailwind, and code Playground

HTML

<!doCTYpe html>
<html>
<head>
	<title>Contactos en el Cliente</title>
	
	<!-- 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">
	
	<!-- bibliotecas javascript server -->
	<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_ProductID;
		var value_ProductName;
		var value_UnitPrice;
		var value_UnitsInStock;
		var value_Discontinued;		

		function PasarDetalleContacto(){

			//send values to form fields
			form1.ProductID.value		=value_ProductID;
			form1.ProductName.value		=value_ProductName;
			form1.UnitPrice.value		=value_UnitPrice;
			form1.UnitsInStock.value	=value_UnitsInStock;
			form1.Discontinued.value	=value_Discontinued;
		}

		function LlamarTipoImpresion() {
			//call window popup
	       	var win = $("#window").data("kendoWindow");
			//title with ProductID and ProductName
	       	var kendoWindow = $("#window").data("kendoWindow").title("Value ProductID : "+value_ProductID+" / Product Name: "+value_ProductName);
	       	
            win.center();
            win.open();
		}        
        
	</script>	
	
</head>
<body>
	    	<!-- content window popup -->
            <div id="window">
				<div id="panels">
					<div>Grid filter by value of ProductID</div>
				    <div id="grid_popup"></div>
				</div>                
           	</div>
           	<!-- content window popup -->	    
	    
	    	<!-- show grid  -->
	    	<div id="grid"></div>
	    	
			<!-- begin form  -->
	            <h3><div id="tituloTexto"></div></h3>
	            <form action='' method='POST' name='form1' id='form1'>
		            <ul>
		            	<li>
		            		<label for="ProductID" class="required"...

JavaScript

$(document).ready(function() {

			$("#grid").kendoGrid({
				  dataSource: {
				    pageSize: 5,
				    transport: {
				      read: {
				        url: "http://demos.kendoui.com/service/products",
				        dataType: "jsonp"
				      }
				    }
				  },
				  sortable: true,
				  pageable: true,
				  selectable: true,
				  change: onChange 
			});
			
			function onChange(e) {
			    grid = e.sender;
			    var currentDataItem = grid.dataItem(this.select());
			    
				noregistro_var 	= currentDataItem.id;

				//assign values of the row selected 
				value_ProductID			=currentDataItem.ProductID;
				value_ProductName		=currentDataItem.ProductName;
				value_UnitPrice			=currentDataItem.UnitPrice;
				value_UnitsInStock		=currentDataItem.UnitsInStock;
				value_Discontinued		=currentDataItem.Discontinued;
                
    			//create filter of grid_popup by value_ProductID, (selected row on grid) 
	    		var grid2 = $("#grid_popup").data("kendoGrid");
		    	grid2.dataSource.filter({ field: "ProductID", operator: "eq", value: value_ProductID });

				//call function :PasarDetalleContacto, send values to form fields
				PasarDetalleContacto();
			}
				
			//begin window popup
			$("#window").kendoWindow({
            	visible: false,
                width: "80%",
                height: "50%",
                draggable: false,
                modal: true,
                iframe: false,
			});
            //end window popup
			//begin grid on window popup	
			$("#grid_popup").kendoGrid({
				  dataSource: {
				    pageSize: 5,
				    transport: {
				      read: {
				        url: "http://demos.kendoui.com/service/products",
				        dataType: "jsonp"
				      }
				    }	 
				  },
				  sortable: true,
				  pageable: true,
				  selectable: true,
				  serverFiltering: true,
				  //filter created on function PasarDetalleContacto()
	               columns: [	
							{ field: "ProductID", title: "ProductID", width: 80,},
							{ field:...