JSFiddle - React, Tailwind, and code Playground

by KendoDev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<div id="combobox-container">
    <input id="combobox" />
</div>

JavaScript

$(document).ready(function() {

var modifyWidth = function (oldWidth) {
  return (oldWidth + 10);
}

var currentWidth = function (id) {    
     var width =  $("#"+id+"-container").find("span>.k-dropdown-wrap").width();   
    return width;
}

 $("#combobox").kendoComboBox({
      index: 1,
      dataSource: {
        data: ["aaaaa", "bbbbb", "ccccc"]
      },
      dataBound: function(e) {
                  var width = modifyWidth(100);
                  $('#combobox-container').find('span>.k-dropdown-wrap').width(width).parent().width(width);
      },
      change: function(e) {
               var width = modifyWidth(110);
               var current_Width = currentWidth("combobox");
               width = current_Width + 10;
               $('#combobox-container').find('span>.k-dropdown-wrap').width(width).parent().width(width);
      }  
 });   
});