JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

$(document).ready(function () {          
         var dsGrid = [{Name: "Good", Quantity: 0, UOM: "KG"}];
         var dsCombo = [{name:"Good", value: "KG"}, {name:"Waste", value: "G"}];          
         $("#grid").kendoGrid({
            dataSource: dsGrid,
            toolbar: ['create'],
            columns: [
                {field: 'Name', title: 'Name', editor: CounterTypeDropDown},        
                {field: 'Quantity', title: 'Quantity'},
                {field: 'UOM', title: 'UOM'},
                { command: ['edit', 'destroy'] }
            ],
            editable: 'inline',       
         });
          
              function CounterTypeDropDown(container, options) {
              var model = options.model;
                  $("<input required data-bind='value: " + options.field + "'/>")
                      .appendTo(container)
                      .kendoDropDownList({
                          autoBind: false,
                          dataSource: dsCombo,
                          dataTextField: "name",
                          dataValueField: "value",
                          select: function(e) {
                              var item = this.dataItem(e.item.index());                 
                              if (item) {               
                                  model.set("UOM", item.value);                 
                              }
                          }
                      }
                  );
              }          
          
        });