JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<input type="hidden" id="csrfToken" value="" />
<div id="formData" class="container-fluid">
  <form class="form-inline" role="form">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3>Search for Property</h3>
      </div>
      <div class="panel-body">

        <div class="row">
          <div class="col-sm-1 reduce-padding">
            <label class="control-label">Property Number</label>
          </div>
          <div class="col-sm-2">
            <input name="PropertyNumber" id="txtPropertyNumber" type="text" class="form-control" value="123" />
          </div>
          <div class="col-sm-1 reduce-padding">
            <label class="control-label">Address</label>
          </div>
          <div class="col-sm-2">
            <input name="Address" id="txtAddress" type="text" class="form-control" value="1313 Mockingbird Lane" />
          </div>
          <div class="col-sm-1 reduce-padding">
            <label class="control-label">At Risk</label>
          </div>
          <div class="col-sm-2">
            <select name="AtRisk" id="ddlAtRisk"...

JavaScript

var gridPropSearchGrid;
var dsPropReturn;

function onDataBound(arg) {

}

$(document).ready(function() {
  var baseUrl = "../api";
  id = 0;
  dsPropReturn = new kendo.data.DataSource({
    transport: {
      read: {
        url: baseUrl + "/property/Search",
        type: 'POST',
        dataType: "json",
        data: $("form").serialize(),	//<-- what's wrong with this?
        //contentType: "application/json;charset=UTF-8",
        //contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        accepts: "application/json",
        beforeSend: function(xhr) {
          alert($("form").serialize());
          xhr.setRequestHeader('X-CSRF-Token', $("#csrfToken").val());
        }
        //traditional: true,
      },

      parameterMap: function(options, operation) {
        //if (operation !== "read") {
        var s = JSON.stringify(options);
        return s;
        //}
      }
    },
    pageSize: 10,
    schema: {
      model: {
        id: "PropertyID",
        fields: {

          PropertyID: {
            type: "number"
          },
          PropertyNumber: {
            type: "string",
            encoded: false,
            validation: {
              maxlength: 100
            }
          },
          PropertyName: {
            type: "string",
            encoded: false,
            validation: {
              maxlength: 100
            }
          },
          Portfolio: {
            type: "string",
            encoded: false,
            validation: {
              maxlength: 100
            }
          },
          PortfolioID: {
            type: "number"
          },
          Region: {
            type: "string",
            encoded: false,
            validation: {
              maxlength: 100
            }
          },
          RegionID: {
            type: "number"
          },
          PropertyManager: {
            type: "string",
            encoded: false,
            validation: {
              maxlength: 100
         ...