JSFiddle - React, Tailwind, and code Playground

by mtrichards26

HTML

<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">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="test"></div>

JavaScript

$("#test").kendoGrid({
    dataSource: {
        data: [
            {FirstName: "test", Title:null,IsTesting:false},
            {FirstName: "test2", Title:1,IsTesting:false},
            {FirstName: "test3", Title:2,IsTesting:null},           
            {FirstName: null, Title:2,IsTesting:true}
          ],
        schema: {
            model: {
                fields: {
                    FirstName: {
                        type: "string"
                    },
                    Title: {
                        type: "number",
                        nullable:true
                    },
                    IsTesting:{
                        type:"boolean",
                        nullable:true                                        
                    }
                    
                    
                }
            }
        },
        pageSize: 10,
        batch:true
    },
    height: 250,
    scrollable: true,
    sortable: true,
    filterable: true,
    groupable:true,
    pageable: {
        input: true,
        numeric: false
    },
    editable : {
        "destroy" : false,
        "update" : true,
        "mode" : "incell"
    },
    columns: [
        {
        field: "FirstName",
        title: "First Name",
        width: 100},
    {
        field: "Title",
        editor: categoryDropDownEditor},
        {field:"IsTesting"}
    ]
});

function categoryDropDownEditor(container, options) {
    $('<input data-text-field="Title" data-value-field="ID" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
        autoBind: false,
        dataSource: {
            data: [
                {ID: 1,Title: "abcd"},
                {ID: 2,Title: "ggggg"}
            ],
            schema: {
                model: {
                    fields: {
                        ID: {type: "number"},
                        Title: {type: "string"}                        
                    }
                }              ...