JSFiddle - React, Tailwind, and code Playground

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/2011.3.1129/styles/kendo.blueopal.min.css">
<div style="height:40px"></div>
<div id="formGrid"></div>

JavaScript

var myenums = ['e1','e2'];

$(function() {
    $('#formGrid').kendoGrid({
        dataSource: { 
            data: [
                { FormDesc: 'hello', FormID: 1, IsEnabled: true, MyEnum: 0 },
                { FormDesc: 'two', FormID: 2, IsEnabled: false, MyEnum: 1 }
            ],
            schema: {
                model: {
                    id: "FormID",
                    fields: {
                        FormDesc: {type: "string"},
                        FormID: {type: "number"},
                        IsEnabled: {type: "boolean"},
                        MyEnum: {type: "enum"}
                    }                        
                }
            }
        }
        , columns: [
         { field: 'FormDesc', title: 'Form Name', width: 140 },
         { field: 'IsEnabled', title: 'Enabled', width: 40 },
         { field: 'MyEnum', title: 'ENUM1', width: 40, template: "#= MyEnum == 0 ? 'E-1' : 'E-2' #" },
        ]
        , filterable: true
        , resizable: true
        , scrollable: true
    });
});