【问题标题】:Is it possible to change Kendo ComboBox option items' width on event?是否可以在事件中更改 Kendo ComboBox 选项项目的宽度?
【发布时间】:2013-09-10 23:06:22
【问题描述】:

我的剑道组合框的显示宽度有限,所以在正常状态下,我需要相当窄。选项项目利用“模板”,并且比 ComboBox 更广泛。我想在用户单击/使用 ComboBox 时更新宽度,虽然我所做的 js/css 更改似乎有效,但选项项直到第二次才以正确的宽度显示单击组合框 - 实际组合框宽度发生变化。

@Html.Kendo().ComboBox()
             .Name("Type")
             .BindTo(Model.Types)
             .Events(e => { e.Open("TypeOpen"); })
             .Template("<div style='width: 300px'>${ data.Text }</div>")

// js

function TypeOpen() {
  $("#Type").closest(".k-widget").css("width", "300px");
}

//第一次点击后;第二次点击后看起来不错

【问题讨论】:

    标签: jquery kendo-ui kendo-asp.net-mvc kendo-combobox


    【解决方案1】:

    如果您将 DropDownList 放在 div 中,您可以使用 css 控制下拉列表的大小:

        <div id="myCombo">
            @Html.Kendo().ComboBox().HtmlAttributes(new { style = "width:50px" }) 
                         .Name("Type")
                         .BindTo(Model.Types)
                         .Events(e => { e.Open("TypeOpen"); })
                         .Template("<div style='width: 300px'>${ data.Text }</div>")
        </div>
    
       <style>
         #myCombo-list
            {
                width: 100px !important;
            }    
       </style>
    

    【讨论】:

    • 漂亮,谢谢!我也能够在不使用 div 的情况下让它工作。我刚刚将样式添加到#Type-list。这样做有没有我看不到的问题?我无法通过在活动期间插入此 css 来使其工作 - 有什么办法可以吗?
    • 没有看到按照您描述的方式包含列表样式的问题...不确定为什么它在事件绑定期间不适用。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-29
    • 1970-01-01
    • 1970-01-01
    • 2011-01-14
    • 2020-06-11
    • 1970-01-01
    相关资源
    最近更新 更多