JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<div id="grid"></div>

JavaScript

var actions = [{
        text: "Index"
    }, {
        text: "New From Existing"
    }];

var products = [{
        productName: "Tea",
    id:1
    }, {
        productName: "Ham",
        id:2
    }];

$("#grid").kendoGrid({
    columns: [{
    field: "productName",
    title: "Name",  
}, {
    title: "Action",
    template: '<input data-product="#:id#" class="dropdownlist">'
    
}],
    dataSource: products
});
var grid = $("#grid").data("kendoGrid");


$(".dropdownlist").kendoDropDownList({
    index:-1,
  dataSource: actions,
  dataTextField: "text",
  dataValueField: "value",
    change: function(a){
        var action= actions[this.selectedIndex];
        alert("Action:"+action.text+" on product with id:"+ this.element.data("product") )
    }
});