5

KendoUI ドロップダウンリストの幅を設定する最良の方法を探しています - 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;"})
)

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 は、水平方向と垂直方向の両方にスクロールしますが、これは望ましくありません。

4

4 に答える 4

15

@Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" })サーバー側で私のために働き、http://docs.kendoui.c​​om / で文書化されています。それほど長くはないかもしれません。

于 2013-06-15T12:04:52.197 に答える
1

それが私を助けたので、私はこれに追加すると思っただけです...

入力の幅を超えて List の幅を拡張するものを適用したい場合は、jQuery セレクターと css クラスを使用してこれを行うことができます。

注：これはコンボボックス用ですが、ドロップダウンリストでも同様に機能するはずです

だからあなたはこれを追加します

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

次に、これを行う Javascript を追加します。

$(document).ready(function () {

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

});

さらに一歩進めると、ドロップダウンを定義するときに幅を指定できるようにすることで、実際にはより一般的なものにすることができます。

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

次に、次のより一般的な JavaScript を使用します。

$(document).ready(function () {
  $("input[data-role=\"combobox\"].wideList").each(function () {
    var combo = $(this).data("kendoComboBox");
    var width = $(this).attr('listWidth');
    combo.list.width(width);
  });
});
于 2013-10-31T12:11:19.037 に答える