JSFiddle - React, Tailwind, and code Playground

by saisworld

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 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>
                </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" data-bind="value:CompanyName, attr: {validationMessage: CompanyNameValidationMsg}" required /> </td>
                <td data-bind="text:LengthOfContract"></td> 
                 <td data-bind = "text:Status"></td>
            </tr>    
        </script>
    </div>
</div>

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'
        });
        var salesVM2 = new SalesViewModel();
        salesVM2.init({
            ID: 2,
            CompanyName: 'Test2',
            LengthOfContract: '4 years',
            Status: 'In Process'
        });

        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 = "";
    this.CompanyName = "";
    this.LengthOfContract = "";
    this.Status = "";
    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;
}