JSFiddle - React, Tailwind, and code Playground

by r2musings

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">

<div id="grid1"></div>
<div id="grid2"></div>

CSS

#grid2 {
margin-top: 15px;
}

.grid-clickable-input-cell {
    position: relative;
}

.grid-clickable-input-cell .clickable-overlay {
       background-color: white; 
       position: absolute; 
       width: 100%; 
       z-index:10; 
       top:0; 
       bottom:0; 
       left:0;        
       right:0;
       opacity: .01;
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=.01)";  //IE8
       *filter: Alpha(Opacity=1);  //IE7                    
}

.k-numeric-wrap {
            width: 120px;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 0;
            background-color: transparent;

}

JavaScript

var localDataSource = new kendo.data.DataSource({
    data: [{
        firstName: "Mike",
        percent: .25},
    {
        firstName: "Chris",
        percent: .30},
    {
        firstName: "John",
        percent: .29}],
    aggregate: [{
        field: "percent",
        aggregate: "sum"}],
    schema: {
        model: {
            fields: {
                firstName: {
                    editable: false
                },
                percent: {
                    editable: true,
                    type: "number"
                }
            }
        }
    }
    });

function _wrapViewOnlyInput(inputHtmlString) {
    return "<div class='grid-clickable-input-cell'><div class='clickable-overlay'></div>" + inputHtmlString + "</div>";
}



function getPercentEditor(container, options) {
    $('<input class="input-small" name="' + options.field + '"/>').appendTo(container).kendoNumericTextBox({
        min: 0,
        max: 100,
        step: 0.01,
        decimals: 2,
        format: "p0"
    });
}

var element1 = $("#grid1").kendoGrid({
    dataSource: localDataSource,
    columns: [{
        title: "First Name",
        field: "firstName"},
    {
        title: "Percent",
        field: "percent",
        aggregates: "sum",
        width: 0,
        footerTemplate: "#= sum #",
        template: "<input type='text' value='${percent}'/>",
        editor: getPercentEditor}],
    autoBind: true,
    editable: true
});


var element2 = $("#grid2").kendoGrid({
    dataSource: localDataSource,
    columns: [{
        title: "First Name",
        field: "firstName"},
    {
        title: "Percent",
        field: "percent",
        aggregates: "sum",
        width: 0,
        footerTemplate: "#= sum #",
        template: _wrapViewOnlyInput("<input type='text' value='${percent}'/>"),
        editor: getPercentEditor}],
    autoBind: true,
    editable: true
});