Edit in JSFiddle

var resizeDropDown = function (e) {
    var $dropDown = $(e.sender.element),
        dataWidth = $dropDown.data("kendoDropDownList").list.width(),
        listWidth = dataWidth + 20,
        containerWidth = listWidth + 6;

    // Set widths to the new values
    $dropDown.data("kendoDropDownList").list.width(listWidth);
    $dropDown.closest(".k-widget").width(containerWidth);
}

// Default implementation with Kendo CSS sizing
$("#defaultSize").kendoDropDownList();

// Resized on data bound to the width of the data in the drop down
$("#resized").kendoDropDownList({
   dataBound: resizeDropDown
});
<div>
    <label for="defaultSize">Default drop down</label>
    <select id="defaultSize">
        <option id="1">Apress Pro ASP.NET MVC 4 Framework</option>
        <option id="2">Head First Object Oriented Analysus and Design</option>
        <option id="3">Working Effectively with Legacy Code</option>
    </select>
</div>
<div>
    <label for="resized">Resized drop down</label>
    <select id="resized">
        <option id="1">Apress Pro ASP.NET MVC 4 Framework</option>
        <option id="2">Head First Object Oriented Analysus and Design</option>
        <option id="3">Working Effectively with Legacy Code</option>
    </select>
</div>
html, body {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
    margin-bottom: 250px;
}

External resources loaded into this fiddle: