Auto Adjust Width of Kendo DropDownList

by karthick6891

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="wrapper">
    
<select id="ddl1">
    <option value="1">1</option>
    <option value="2">option 2</option>
    <option value="3">longer kjyhiudjhduiewyiuewhdouiewyduiewoiewydiweydoweydoiwuye 3</option>
</select>

&nbsp;    &nbsp;
    
<select id="ddl2">
    <option value="1">1</option>
    <option value="2">option 2</option>
    <option value="3">longer option 3</option>
    <option value="4">even longer option 4</option>
</select>


</div>

CSS

#wrapper
{
    width:80%;
    margin:40px auto;
}

JavaScript

function setWidth(el)
{
    var d = el;
    var p = d.data("kendoDropDownList").popup.element;
    var w = p.css("visibility","hidden").show().outerWidth();
    p.hide().css("visibility","visible");
    d.closest(".k-widget").width(w);
}

$("#ddl1").kendoDropDownList();
setWidth($("#ddl1"));

$("#ddl2").kendoDropDownList();
setWidth($("#ddl2"));