JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="example">
    <div data-bind="source: Sales" data-template="tbl-Sales-template">        
        
    </div>
    <div class="salesWindow" data-role="window" data-modal="true" data-title="Edit Sales Details" data-width="400" data-height="300">
        <table class="tbl">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Company Name</th>
                    <th>Contract Length</th>
                    <th>Status</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody data-template="tbl-Sales-editTemplate" data-bind="source: Sales">
                
            </tbody>
        </table>
        <button data-bind="click: Isvalid">Validate</button>
        <script id="tbl-Sales-editTemplate" type="text/x-kendo-template">
            <tr>
                <td data-bind="text:ID"></td>
                <td><input type="text" name="input#:ID#" data-bind="value:CompanyName, attr: {validationMessage: CompanyNameValidationMsg}" required /> </td>
                <td data-bind="text:LengthOfContract"></td> 
                <td data-bind = "text:Status"></td>
                <td data-bind = "text:CompanyName"></td>
            </tr>    
        </script>
        
        <script id="tbl-Sales-template" type="text/x-kendo-template">
        <tr>
                    <td data-bind="text:ID"></td>
                    <td data-bind="text:CompanyName"></td>
                    <td data-bind="text:LengthOfContract"></td>
                    <td data-bind="text:Status"></td>
        </tr>
</script>
        
   ...

CSS

.tbl {
     table-layout:auto;
     border-collapse:collapse;
     width:100%;
 }
 .tbl thead th {
     border-bottom:solid 1px #ededed;
     background-color:#ededed;
     padding:5px;
     text-align:left;
     color:#9c9c9c;
     font-size:0.9em;
     font-weight:normal;
 }
 .tbl tbody td {
     border-bottom:solid 1px #ededed;
     padding:5px;
     color:#686868;
     font-size:0.9em
 }

JavaScript

$(function () {
    var vm = new SalesCollectionViewModel();
    vm.loadAllSales();
    vm.validator = $(".salesWindow").kendoValidator().data("kendoValidator");
    kendo.bind($('#example'), vm);
});



function SalesCollectionViewModel() {
    var that;
    this.Sales = [];
    this.validator = "";


    this.loadAllSales = function () {
        that.Sales.length = 0;
        var salesVM = new SalesViewModel();
        salesVM.init({
            ID: 1,
            CompanyName: 'Test1',
            LengthOfContract: '3 years',
            Status: 'In Process'
        });

        salesVM.bind("set", function (e) {
            if (!e.value) {
                e.preventDefault();
            }
        });

        var salesVM2 = new SalesViewModel();
        salesVM2.init({
            ID: 2,
            CompanyName: 'Test2',
            LengthOfContract: '4 years',
            Status: 'In Process'
        });

        salesVM2.bind("set", function (e) {
            if (!e.value) {
                e.preventDefault();
            }
        });

        that.Sales.push(salesVM);
        that.Sales.push(salesVM2);
    }

    this.Isvalid = function () {
        console.log(that.validator.validate());
    };

    that = kendo.observable(this);
    return that;
}


function SalesViewModel() {

    var that;


    //---Properties

    this.ID = "dasd";
    this.CompanyName = "asdas";
    this.LengthOfContract = "asdasd";
    this.Status = "asdas";
    this.CompanyNameValidationMsg = "Required!";


    // --- public functions

    this.init = function (sales) {
        that.set("ID", sales.ID);
        that.set("CompanyName", sales.CompanyName);
        that.set("LengthOfContract", sales.LengthOfContract);
        that.set("Status", sales.Status);
    };

    that = kendo.observable(this);
    return that;
}