JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<table id="grid"> </table>
<input type="button" id="search" value="Search"></input>

JavaScript

var search = {
			offerTo: new Date("11/5/2013"),
			offerFrom: new Date("11/5/2012"),
		};


		$(document).ready(function() {
			$("#grid").kendoGrid({
				dataSource: {
					type: "odata",
					serverPaging: true,
					serverSorting: true,
					pageSize: 100,
					transport: {
                        read: function(e) {
                            e.success({d:[]});
                        }
					}
				},
				height: 430,
				scrollable: {
					virtual: true
				},
				sortable: true,
				columns: [
					{ field: "OrderID", title: "Order ID", width: 60 },
					{ field: "CustomerID", title: "Customer ID", width: 90 },
					{ field: "ShipName", title: "Ship Name", width: 220 },
					{ field: "ShipAddress", title: "Ship Address", width: 280 },
					{ field: "ShipCity", title: "Ship City", width: 110 },
					{ field: "ShipCountry", title: "Ship Country", width: 110 }
				]
				});
			$("#search").click(function(e) {
				$("#grid").data("kendoGrid").dataSource.read({ search: JSON.stringify(search) });
				e.preventDefault();
			});

			var grid = $("#grid").data().kendoGrid;
            grid.setDataSource(new kendo.data.DataSource({
				type: "odata",
				serverPaging: true,
				serverSorting: true,
				pageSize: 100,
				transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"}
				}));
			
                                                                 grid.dataSource.read();
			//grid._dataSource();
		});