KendoUI 设置下拉列表的宽度

Posted 2023-05-07

【中文标题】KendoUI 设置下拉列表的宽度

【英文标题】：KendoUI Set width of dropdownlist

【发布时间】：2013-04-23 10:52:38

【问题描述】：

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

【参考方案1】：

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

【参考方案2】：

使用js，来自剑道网站：

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

JsFiddle

【讨论】：

可以，但我希望通过服务器端 KendoUI HTML Helper 设置宽度

实际上问题是页面中的冲突代码导致 Kendo 无法识别 ddl/span 代码。我的错，但你的客户端答案确实有效，所以我会给你功劳。

HTML 助手不是服务器端的。它们只是编写 javascript 的快捷方式。服务器端解决方案意味着服务器执行任务，如果我们谈论影响 UI，这是没有意义的。除非你从你的服务器可以在你的客户端上运行 javascript 的地方建立一些疯狂的 SignalR / Socket 连接...... :D

【参考方案3】：

只是想我会添加它，因为它确实对我有帮助......

如果您想应用将 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);
  );
);

【参考方案4】：

给你：

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

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