KendoUIドロップダウンリストの幅を設定する

Question

剣道HTMLヘルパーを使用して、KendoUIドロップダウンリストの幅を設定する最善の方法をお探しです。

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

私はDropDownListコントロールの幅を設定していますが、生成されたHTMLでの通知は、200個のピクセルの幅は隠しテキスト入力ではなく、ドロップダウンリストに設定されている：

<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"> 

..それで、結果として得られるDropDownListはまだ水平方向と垂直方向の両方にスクロールしますが、これは嫌です。剣道サイトからJS、と

Answer 1

@Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" })とhttp://docs.kendoui.com/に文書化。それほど長くないかもしれない。

Answer 2

：私のためにサーバー側の作業に

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

JsFiddle

Answer 3

はちょうどあなたが入力の幅を超えてリストの幅を拡張するものを適用したい場合は、使用してこれを行うことができます

...それは私を助けていたように私はこれに追加しようと思いましたjQueryセレクタとCSSクラス。

注：

$(document).ready(function() { 

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

}); 

：これはコンボボックスのためですが、DropDownListの

でも同様に動作しなければならないので、あなたはこの

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

を追加し、これを行うのJavascriptの作品を追加

さらにステップを進めるには、ドロップダウンを定義するときに幅を指定できるようにして、より一般的にすることができます。

その後

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

のより一般的なのjavascript：シンプル

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

、それは時間を過ごした後、私の作品：

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

ここに行きます！