KendoUI Imposta la larghezza del menu a discesa

Question

Sto cercando il modo migliore per impostare la larghezza del dropdownlist KendoUI - tramite l'helper HTML di Kendo.

@(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;"}) 
) 

sto impostando la larghezza della DropDownList, a meno di notare nel codice HTML generato, la larghezza di 200 pixel è impostato su un input di testo nascosto, non il 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"> 

.. . Quindi il DropDownList risultante continua a scorrere sia orizzontalmente che verticalmente, cosa che non voglio.

Answer 1

@Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" }) sul lavoro lato server per me e documentato su http://docs.kendoui.com/. Potrebbe non essere così lungo.

Answer 2

Con js, dal sito di Kendo:

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

JsFiddle

Answer 3

Ho pensato di aggiungere a questo come ha fatto aiutarmi ...

Se si desidera applicare qualcosa che si estende la larghezza della lista oltre la larghezza dell'ingresso, si può fare questo con un selettore jQuery e una classe css.

nota: questo è per il comboBox, ma dovrebbe funzionare altrettanto bene con la DropDownList

Quindi si aggiunge questo

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

Quindi aggiungere un pezzo di JavaScript che fa questo:

$(document).ready(function() { 

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

}); 

Per fare un ulteriore passo avanti, è possibile renderlo più generico consentendo di specificare la larghezza quando si definisce il menu a discesa:

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

Poi il javascript più generico di:

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

Qui si va:

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

semplice e funziona per me dopo aver trascorso un'ora!