JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="statussearchgrid" class="maingrid"></div>

JavaScript

var dataSample = [];
dataSample.push({MappingId:1, MarketSegment:"Auto", Submarket:"SUV", MappedStatus:""});
dataSample.push({MappingId:2, MarketSegment:"Auto", Submarket:"Hybrid", MappedStatus:""});
dataSample.push({MappingId:3, MarketSegment:"Auto", Submarket:"Electric", MappedStatus:""});
dataSample.push({MappingId:4, MarketSegment:"Auto", Submarket:"Sedan", MappedStatus:""});
dataSample.push({MappingId:5, MarketSegment:"Air", Submarket:"Regional", MappedStatus:""});
dataSample.push({MappingId:6, MarketSegment:"Air", Submarket:"National", MappedStatus:""});
dataSample.push({MappingId:7, MarketSegment:"Air", Submarket:"International", MappedStatus:""});
dataSample.push({MappingId:8, MarketSegment:"Sea", Submarket:"Cruise", MappedStatus:""});
dataSample.push({MappingId:9, MarketSegment:"Sea", Submarket:"Fishing", MappedStatus:""});

var mappingList= [];
mappingList.push({MappedStatusId:1, MappedStatus: "Not Important"});
mappingList.push({MappedStatusId:2, MappedStatus: "Some Importance"});
mappingList.push({MappedStatusId:3, MappedStatus: "Very Important"});
        

var dataSourceMapping = new kendo.data.DataSource({
            data: mappingList,
            schema: {
                model: {
                    id: "MappedStatusId", 
                    fields: {
                        MappedStatusId: { editable: false, nullable: false },
                        MappedStatus: { editable: false, nullable: false }
                    }
                }
            }
        });

var dataSource = new kendo.data.DataSource({
            data: dataSample,
            schema: {
                model: {
                    id: "MappingId",
                    fields: {
                        MarketSegment: { editable: false, nullable: true },
                        Submarket: { editable: false, nullable: true },
                        MappedStatus: { editable: true, nullable: true }
                    }
                }
            }
        });
var...