KendoUI Breite der Dropdownliste einstellen

Question

Ich suche nach der besten Möglichkeit, die Breite der KendoUI Dropdownliste festzulegen - über den 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;"}) 
) 

ich die Breite der Dropdown Einstellung, aber Bekanntmachung im generierten HTML-Code, wird die Breite von 200 Pixeln auf einer versteckte Texteingabe gesetzt, nicht auf die 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 scrollt die resultierende DropDownList sowohl horizontal als auch vertikal, was ich nicht will.

Answer 1

@Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" }) auf Serverseite Arbeit für mich und dokumentiert auf http://docs.kendoui.com/. Kann nicht so lang sein.

Answer 2

Mit js, von der Kendo-Website:

// get reference to the DropDownList 
var dropdownlist = $("#size").data("kendoDropDownList"); 
// set width of the DropDownList 
dropdownlist.list.width(500); 

JsFiddle

Answer 3

dachte, ich würde diesem hinzufügen, wie es mir geholfen hat ...

Wenn Sie etwas bewerben möchten, dass die Breite der Liste über die Breite des Eingangs erstreckt, können Sie dies eine Verwendung tun jQuery-Selektor und eine CSS-Klasse.

Hinweis: Dies ist für die comboBox, sollte aber gleich gut mit dem Dropdown

So fügen Sie diesen

@(Html.Kendo().ComboBoxFor(m => m.UserId) 
     ... 
     .HtmlAttributes(new { @class = "wideList" }) 
    ) 

Dann ein Stück Javascript hinzufügen, tut dies:

$(document).ready(function() { 

$("input[data-role=\"combobox\"].wideList").each(function() { 
    var combo = $(this).data("kendoComboBox"); 
    combo.list.width(400); 
}); 

}); 

Um noch einen Schritt weiter zu gehen, könnten Sie es sogar generischer machen, indem Sie die Breite beim Definieren des Dropdown-Menüs angeben lassen:

@(Html.Kendo().ComboBoxFor(m => m.UserId) 
    ... 
    .HtmlAttributes(new { @class = "wideList", listWidth = "400" }) 
) 

Dann wird die allgemeinere Javascript von:

$(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

Hier gehen Sie:

$("#Dropdopwnlist").kendoDropDownList().parent().css("width", "200%"); 

einfach und es funktioniert für mich eine Stunde, nachdem er!