JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script id="tooltip-template" type="text/x-kendo-template">
    <span class = "k-widget k-tooltip k-tooltip-validation k-invalid-msg" > <span class = "k-icon k-warning" > </span>#=message#</span>
</script>

<!-- grid element -->
<div id="grid" style="width: 700px; margin: 0 auto;"></div>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
			<p>Custom editor template</p>
			<ul>
                <li>
                    <label for="FirstName">Firs Name</label>
                    <input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName" required>
                </li>
                <li>                
                    <label for="LastName" style="color: red;">Last Name</label>		
                    <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName" required>
                </li>
                <li>
                    <label for="BirthDate">Birth Date</label>
            
                    <!-- datepicker editor for field: "BirthDate" -->
                    <input type="text"
                    name="BirthDate"
                    data-type="date"
                    data-bind="value:BirthDate"
                    data-role="datepicker" required />
                </li>
                <li>                		
                    <label for="Age">Age</label>            
                    <!-- numeric textbox editor for field: "Age" -->
                    <input type="text" name="Age" data-type="number" data-bind="value:Age" data-role="numerictextbox" required />
                </li>
           ...

CSS

span.k-tooltip {
        margin-left: 6px;
    }
    .k-edit-form-container {
        width: 600px;
    }

    .k-edit-form-container li {
        margin: 10px 0px;
}

JavaScript

var data = createRandomData(50);

      $(document).ready(function () {
          $("#grid").kendoGrid({
              dataSource: {
                  data: data,
                  schema: {
                      model: {
                          fields: {
                              FirstName: {
                                  type: "string"
                              },
                              LastName: {
                                  type: "string"
                              },
                              City: {
                                  type: "string"
                              },
                              Title: {
                                  type: "string"
                              },
                              BirthDate: {
                                  type: "date"
                              },
                              Age: {
                                  type: "number"
                              }
                          }
                      }
                  },
                  pageSize: 10
              },
              height: 450,
              scrollable: true,
              sortable: true,
              pageable: true,
              editable: {
                  mode: "popup",
                  template: $("#popup_editor").html()
              },
              edit: function (e) {
                  e.sender.editable.validatable._errorTemplate = kendo.template($('#tooltip-template').html());
              },
              toolbar: ["create"],
              columns: [{
                  field: "FirstName",
                  title: "First Name",
                  width: 100
              }, {
                  field: "BirthDate",
                  title: "Birth Date",
                  template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
              }, {
                  field: "Age",
                  width: 100
              }, {
                  command: ["edit",...