Question

我正在寻找设置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仍然水平和垂直滚动，这是我不想要的。

Answer 1

服务器端的

@Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" })为我工作并记录在http://docs.kendoui.com/上。可能不会这么久。

Answer 2

来自剑道网站的js：

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

JsFiddle

Answer 3

以为我会加入这个，因为它确实帮助了我......

如果要应用扩展List宽度超出输入宽度的内容，可以使用jQuery选择器和css类来执行此操作。

注意：这是针对comboBox的，但应该与DropdownList

同样有效

所以你添加这个

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

Answer 4

你走了：

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

简单，花了一个小时后它对我有用！

KendoUI设置下拉列表的宽度

4 个答案: