Kendo UI resize drop down to data width

JavaScript function to resize the data in a Kendo UI drop down to the width of the data instead of the default drop down width.

by Joe Wilson

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<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>

CSS

html, body {
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
    margin-bottom: 250px;
}

JavaScript

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
});