JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/sushi/kendo.mobile.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<h2><b><i>MyGrid</i></b></h2>
<div id="myGrid"></div>

JavaScript

var myData = [
    {
        Id: 1,
        Color: "Green",
        Selected: false
    },
    {
        Id: 2,
        Color: "Red",
        Selected: false
    },
    {
        Id: 3,
        Color: "Bluegajg",
        Selected: false
    },
    {
        Id: 4,
        Color: "Black",
        Selected: true
    }];

$(document).ready(function() {
    var grid = $("#myGrid").kendoGrid({
        dataSource: {
            data: myData,
            schema: {
                model: {
                    fields: {
                        Id: { type: "number" },
                        Color: { type: "string" },
                        Selected: { type: "bool" }
                    }
                }
            },
            pageSize: 10
        },
        columns: [
            {
                field: "Selected",
                field: "Selected",
                template: '<input type="checkbox" id="SelectedCB" #= Selected ? checked="checked" : "" # />'
            },
            {
                field: "Id",
                title: "Id"
            },
            {
                field: "Color",
                title: "Color"
            }
        ],
        height: 500,
        scrollable: true,
        sortable: true,
        selectable: true,
        filterable: true,
        pageable: true
    }).data("kendoGrid");

    grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({
        useOnDesktop: false
    });
});