JSFiddle - React, Tailwind, and code Playground

by korchev

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="grid"></div>

JavaScript

var mockDeliverableTemplates = function() {
    var result = [];
    for (var i = 0; i < 50; i++) {
        result[i] = {
            Id: i + 1,
            Title: 'title ' + i,
            Description: 'desc ' + i,
            StartDate: new Date(),
            EndDate: new Date(),
            StatutoryDueDate: new Date(),
            ClientDueDate: new Date(),
            InternalDueDate: new Date(),
            Efile: false
        }
    }
    return result;
}

var data = mockDeliverableTemplates();
var observableData = new kendo.data.ObservableArray(data);

var schemaModel = {
    id: 'Id',
    fields: {
        select: { type: "string", editable: false },
        Id: { type: "number" },
        Title: { editable: true },
        Description: { type: "string" },
        Efile: { type: "boolean" }
    }
};

var gridColumns = [
    {
        field: "select",
        title: "&nbsp;",
        template: '<input type=\'checkbox\' class="rowSelectBox" />',
        sortable: false, //disable sorting
        filterable: false, //disable filtering
        width: 64
    },
    {
        field: "Title",
        width: 120,
        template: '<a href="\\#">#=Title#</a>'
    },
    { field: 'Description', width: 120 },
    { field: 'Efile', width: 80 },
    { command: ['edit'], title: 'Edit', width: 190 }
];

$("#grid").kendoGrid({
    dataSource: {
        data: data,
        schema: {
            model: schemaModel
        }
    },
    columns: gridColumns,
    editable: "inline"
});