JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.metro.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="stylized" class="formFrame">
    <div style="width:90%; margin: auto; height: auto; padding-bottom: 20px">
        <input id="testInput" placeholder="City/ Suburb" class='RegistrationInput' name="Test" required="false"/>
    </div>
    <div style="width:90%; margin: auto; height: auto; padding-bottom: 20px">
        <input id="SubmitTest" value="Submit" type="submit" class="MediRecordsButton" style="width: 70px;"/>
    </div>   
    <!-- grid element -->
    <div id="grid" style="text-align: left;"></div>
</div>
</br>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
    <p>Custom editor template</p>
    <input class='RegistrationInput' type="text" name="FirstName" data-bind="value:FirstName" placeholder="First Name" required>
    </br>
</br>
    <input class='RegistrationInput' type="text" name="LastName" data-bind="value:LastName" placeholder="Last Name" required>

</script>

CSS

#stylized {
    border: 2px solid #dddcdc;
    border-radius:10px;
    background:#ffffff;
}
.formFrame {
    margin:0 auto;
    width:50%;
    padding:20px 20px 20px 20px;
    text-align: center;
}
.RegistrationInput{
    width: 98%;
    height: 25px;
    font-size: 12px;
    color: #838383;
    border: 1px solid #dcdcdc;
    border-radius: 3px
}
.k-widget.k-tooltip-validation {
    background-color: #f0898a;
    border-color: #f0898a;
    color: white;
    position: absolute;
    border-radius: 3px;
    margin-left: 10px;
    text-align: left;
}

.k-widget.k-tooltip.k-tooltip-validation.k-invalid-msg {
    background-color: #f0898a;
    border-color: #f0898a;
    color: white;
    position: absolute;
    border-radius: 3px;
    margin-left: 10px;
    text-align: left;
}

.k-icon.k-warning {
    display: none;
}

input.k-invalid
{
    border: 1px solid #f0898a;
}
.k-widget.k-tooltip-validation:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-color: transparent #f0898a;
    display: block;
    width: 0;
    z-index: 1;
    left: -5px;
    top: 3px;
}

JavaScript

var validator = $("#stylized").kendoValidator({
            validateOnBlur: false
        }).data("kendoValidator");
$("#SubmitTest").on("click", function () {
    if (validator.validate()) {
        // If the form is valid, the Validator will return true
        alert("Validation has passed");
    }
});

var data = createRandomData(50);
var autoCompleteDS = new kendo.data.DataSource({
    data: [
        {
        firstName: "Alex"},
    {
        firstName: "Alice"},
    {
        firstName: "Antony"},
    {
        firstName: "Anne"},
    {
        firstName: "Anna"}
    ]
});

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            data: data,
            schema: {
                model: {
                    fields: {
                        FirstName: {
                            type: "string"
                        },
                        LastName: {
                            type: "string"
                        }
                    }
                }
            },
            pageSize: 10
        },
        height: 450,
        scrollable: true,
        sortable: true,
        pageable: true,
        editable: {
            mode: "popup",
            template: kendo.template($("#popup_editor").html())
        },
        edit: function(e) {

        },
        toolbar: ["create"],
        columns: [
            {
            field: "FirstName",
            title: "First Name",
            width: 100},
            {
            field: "LastName",
            title: "Last Name",
            width: 100}
        ]
    });
});