KendoUI Set width of dropdownlist - asp.net-mvc-4

Question

I'm looking for the best way to set the width of the KendoUI dropdownlist - via the Kendo HTML Helper.
#(Html.Kendo().DropDownList()
.Name("ddlAccount")
.DataTextField("Name")
.DataValueField("Id")
//This doesn't work, it styles the hidden input instead of the ddl
.HtmlAttributes(new {style="width:200px;"})
)
I'm setting the width of the DropDownList, but notice in the generated HTML, the width of 200 pixels is set on a hidden text input, not the dropdownlist:
<span aria-busy="false" aria-readonly="false" aria-disabled="false" aria-owns="ddlAccount_listbox" tabindex="0" aria-expanded="false" aria-haspopup="true" role="listbox" class="k-widget k-dropdown k-header styled_select" style="" unselectable="on" aria-activedescendant="ddlAccount_option_selected">
<span class="k-dropdown-wrap k-state-default">
<span class="k-input">Choice One</span>
<span class="k-select">
<span class="k-icon k-i-arrow-s">select</span>
</span>
</span>
<input id="ddlAccount" name="ddlAccount" style="width: 200px; display: none;" type="text" data-role="dropdownlist">
...So the resulting DropDownList still scrolls both horizontally and vertically, which I don't want.

Answer 1

#Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" }) on server side work for me and documented on http://docs.kendoui.com/ . May be not so long.

Answer 2

With js, from the Kendo site:
// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);
JsFiddle

Answer 3

Just thought I'd add to this as it did help me...
If you want to apply something that extends the width of the List beyond the width of the input, you can do this using a jQuery selector and a css class.
note: this is for the comboBox, but should work equally well with the DropdownList
So you add this
#(Html.Kendo().ComboBoxFor(m => m.UserId)
...
.HtmlAttributes(new { #class = "wideList" })
)
Then add a piece of Javascript that does this:
$(document).ready(function () {
$("input[data-role=\"combobox\"].wideList").each(function () {
var combo = $(this).data("kendoComboBox");
combo.list.width(400);
});
});
To take a step further yet, you could actually make it more generic by allowing the width to be specified when defining the dropdown:
#(Html.Kendo().ComboBoxFor(m => m.UserId)
...
.HtmlAttributes(new { #class = "wideList", listWidth = "400" })
)
Then the more generic javascript of:
$(document).ready(function () {
$("input[data-role=\"combobox\"].wideList").each(function () {
var combo = $(this).data("kendoComboBox");
var width = $(this).attr('listWidth');
combo.list.width(width);
});
});

Answer 4

Here you go:
$("#Dropdopwnlist").kendoDropDownList().parent().css("width", "200%");
Simple and it works for me after spending an hour!